使用 Webpack 将 jQuery 暴露给实际的 Window 对象

我想将 jQuery 对象公开给全局窗口对象，可以在浏览器中的开发人员控制台中访问该对象。现在在我的 webpack 配置中，我有以下代码行:

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

这些行将 jQuery 定义添加到 webpack 模块中的每个文件。 但是，当我构建这个项目并尝试在开发人员控制台中访问 jQuery 时，如下所示:

window.$;
window.jQuery;

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

有办法解决吗？

86518 次浏览
小开
最佳答案

你需要使用 曝光装载机曝光装载机。

npm install expose-loader --save-dev

You can either do this when you require it:

require("expose?$!jquery");

或者你可以在你的配置中这样做:

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

更新 : 从 webpack 2开始，您需要使用 曝光装载机曝光装载机而不是 曝光:

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

ProvePlugin 通过各自的导入替换另一个源中的符号，但不在全局命名空间中公开该符号。 JQuery 插件就是一个典型的例子。它们中的大多数只是期望 jQuery是全局定义的。使用 ProvidePlugin，您可以确保 jQuery 是一个依赖项(例如之前加载的) ，代码中出现的 jQuery将被相当于 require('jquery')的 webpack 原始代码所替代。

如果有外部脚本依赖于全局名称空间中的符号(比如说外部托管的 JS、 Selenium 中的 Javascript 调用或者只是在浏览器控制台中访问该符号) ，那么您希望改用 expose-loader。

简而言之: ProvidePlugin 管理对全局符号的构建时依赖关系，而 expose-loader管理对全局符号的运行时依赖关系。

小开

对我来说很有用

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

看起来 window对象在所有模块中都公开了。

为什么不直接导入/要求 JQuery，然后写上:

window.$ = window.JQuery = JQuery;

在需要/导入使用 window.JQuery的任何模块之前，您需要确保发生这种情况，无论是在需要模块中还是在使用该模块的模块中。

小开

Webpack v2的更新

按照 Matt Derrick 的描述安装 曝光装载机曝光装载机:

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" }
]
}
};

(来自 曝光加载程序文档)

小开

This always worked for me. including for 网络包3 window.$ = window.jQuery = require("jquery");

小开

以上这些对我来说都不管用(我真的不喜欢暴露加载程序语法),

I added to webpack.config.js:

var webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
}

所有模块都可以通过 jQuery 通过 $访问。

您可以通过将以下内容添加到 webpack 绑定的任何模块中，将其公开到窗口中:

window.$ = window.jQuery = $

提交答案