我希望将 jQuery 对象暴露给全局的 window 对象，以便在浏览器的开发者控制台中访问。现在，在我的 webpack 配置中，我有以下行：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
这些代码将jQuery的定义添加到我的webpack模块中的每个文件中。 但是，当我构建项目并像这样在开发者控制台中尝试访问jQuery时:
window.$;
window.jQuery;
它表示这些属性未定义......
有没有办法解决这个问题？
你需要使用 expose-loader。
npm install expose-loader --save-dev
你可以在需要时执行此操作：
require("expose?$!jquery");
或者您可以在配置文件中这样做:
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: '$'
}]
}]
}
ProvidePlugin 应主要用于第三方库依赖全局变量存在的情况。 - Johannes Ewald{test: /jquery\.js$/, loader: 'expose?jQuery!expose?$'}。 - Fernando$ = require('jquery'); window.jQuery = $; window.$ = $;，这样就不需要使用 expose-loader。 - hermanmodule: { rules: [{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] }] }。这是我能够暴露jQuery的唯一方法，并且它使用了新的module.rules语法。 - Gavin SutherlandjQuery。使用ProvidePlugin可以确保jQuery是依赖项（例如在之前已经加载），并且代码中出现的jQuery会被替换为webpack原始等价物require('jquery')。expose-loader。expose-loader管理运行时对全局符号的依赖关系。看起来 window 对象在所有模块中都是公开的。
为什么不直接导入/引入 JQuery 并放置：
window.$ = window.JQuery = JQuery;
在需要/引入任何使用window.JQuery的模块之前，您需要确保此操作已发生。这可能是在一个引入模块中或在使用它的模块中。
require 时有效，但不适用于 import。 - aboutqxJQuery的变量。 - mhessimport 时，可能会遇到错误，因为 import 语句会被移到文件的顶部，而 require 语句则保持在它们放置的位置。所以只有在窗口变量未设置时，运行顺序才会因 import 而改变。 - aboutqx这个方法一直在我这里奏效，包括在 webpack 3 中。 window.$ = window.jQuery = require("jquery");
以上方法都对我没有用。（而且我真的不喜欢 expose-loader 语法）。相反，
我在 webpack.config.js 中添加了以下内容：
var webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
}
所有模块都可以通过$符号在jQuery中访问。
您可以通过向webpack捆绑的任何模块添加以下内容将其暴露给窗口：
window.$ = window.jQuery = $
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" }
]
}
};
window.jQuery = require('jquery')。 - trpt4him在我的情况下有效
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
Webpack v2 更新
在升级到 webpack 5 后，您可能会面临此警告。
[DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[7].use[0].options)
只需将选项更改为
options: {
exposes: ["$", "jQuery"],
}
将会长成这个样子：
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
{
exposes: ["$", "jQuery"],
}
}]
}]
}
this: 'window'吗？因为许多库假定this变量是Window对象。 - Abhinav Singi