关于javascript：使用Webpack将jQuery暴露给真实的Window对象

Expose jQuery to real Window object with Webpack

我不会将jQuery对象公开给浏览器中开发人员控制台内部可访问的全局窗口对象。现在在我的webpack配置中，有以下几行：

1
2
3
4
5
6

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

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

1 2	window.$; window.jQuery;

它说这些属性是不确定的...

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

相关讨论

您需要使用暴露加载程序。

1	npm install expose-loader --save-dev

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

1	require("expose?$!jquery");

或者您可以在配置中执行以下操作：

1
2
3

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

更新：从webpack 2开始，您需要使用暴露加载器而不是暴露：

1
2
3
4
5
6
7
8
9

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

相关讨论

ProvidePlugin通过相应的导入替换了另一个源中的符号，但是没有在全局名称空间中公开该符号。
一个经典的例子是jQuery插件。他们中的大多数人只希望jQuery被全局定义。使用ProvidePlugin，您可以确保jQuery是一个依赖项(例如，之前已加载)，并且代码中jQuery的出现将替换为require('jquery')的webpack原始等效项。

如果您有依赖于符号位于全局命名空间中的外部脚本(例如，假设是外部托管的JS，Selenium中的Javascript调用或只是在浏览器控制台中访问该符号)，则您应该使用expose-loader。

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

相关讨论

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

为什么不只导入/要求jQuery并放入：

1	window.$ = window.JQuery = JQuery;

您需要确保在要求/导入要求模块中或正在使用它的模块中，在使用/导入任何使用window.JQuery的模块之前发生这种情况。

相关讨论

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

相关讨论

以上都不对我有用。 (我真的不喜欢暴露加载器语法)。代替，

我添加到webpack.config.js：

1
2
3
4
5
6
7
8

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

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

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

1	window.$ = window.jQuery = $

相关讨论

就我而言

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

Webpack v2的更新

按照Matt Derrick的说明安装暴露加载程序：

1	npm install expose-loader --save-dev

然后在webpack.config.js中插入以下代码段：

1
2
3
4
5
6
7
8
9
10
11
12
13

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

(来自暴露加载程序文档)

相关讨论