使用Webpack将jQuery暴露给真正的Window对象

我不想将jQuery对象暴露给在浏览器中的开发者控制台中可访问的全局窗口对象。 现在在我的webpackconfiguration我有以下几行：

plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] 

这些行将jQuery定义添加到我的webpack模块中的每个文件。 但是当我构build项目并尝试像这样访问开发者控制台中的jQuery：

 window.$; window.jQuery; 

它说这些属性是未定义的…

有没有办法来解决这个问题？

Answer 1

你需要使用expose-loader 。

 npm install expose-loader --save-dev 

您可以在需要时执行此操作：

 require("expose?$!jquery"); 

或者你可以在你的configuration中做到这一点：

 loaders: [ { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' } ] 

更新 ：从webpack 2开始，你需要使用expose-loader而不是expose ：

 module: { rules: [{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: '$' }] }] } 

Answer 2

ProvidePlugin通过相应的导入replace另一个源中的符号，但不公开全局名称空间上的符号。 一个经典的例子是jQuery插件。 他们大多只是期望全球定义jQuery 。 使用ProvidePlugin可以确保jQuery是一个依赖项（例如之前加载的），并且在代码中出现的jQuery将被replace为require('jquery')的webpack原始等价物。

如果你有依赖于符号的外部脚本在全局命名空间（比如让我们说一个外部托pipe的JS，在Selenium中调用Javascript，或者只是在浏览器的控制台中访问这个符号），你想使用expose-loader 。

简而言之：ProvidePluginpipe理全局符号的构build时依赖关系，而expose-loaderpipe理全局符号的运行时依赖关系。

Answer 3

看起来window对象是暴露在所有模块中。

为什么不只是导入/需要JQuery并把：

 window.$ = window.JQuery = JQuery; 

在你的入口点模块？

Answer 4

在我的情况下工作

 { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" } 

Answer 5

更新Webpack v2

按照Matt Derrick所述安装expose-loader ：

 npm install expose-loader --save-dev 

然后在你的webpack.config.js插入下面的代码片段：

 module.exports = { entry: { // ... }, output: { // ... }, module: { loaders: [ { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" } ] } }; 

（来自Expos-loader文档 ）

Answer 6

这一直对我有用。 包括webpack 3 window.$ = window.jQuery = require("jquery");