[英]Expose jQuery to real Window object with Webpack
I want to expose the jQuery object to the global window object that is accessible inside the developer console in the browser.我想将 jQuery object 暴露给全局 window object,它可以在浏览器的开发人员控制台中访问。 Now in my webpack config I have following lines:
现在在我的 webpack 配置中有以下几行:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
These lines add the jQuery definitions to each file in my webpack modules.这些行将 jQuery 定义添加到我的 webpack 模块中的每个文件。 But when I build the project and try to access jQuery in the developer console like this:
但是当我构建项目并尝试在开发人员控制台中访问 jQuery 时,如下所示:
window.$;
window.jQuery;
it says that these properties are undefined...它说这些属性未定义...
Is there a way to fix this?有没有办法来解决这个问题?
You need to use the expose-loader .您需要使用Exposure-loader 。
npm install expose-loader --save-dev
You can either do this when you require it:您可以在需要时执行此操作:
require("expose?$!jquery");
or you can do this in your config:或者您可以在配置中执行此操作:
loaders: [
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
UPDATE : As of webpack 2, you need to use expose-loader instead of expose :更新:由于2的WebPack的,你需要使用暴露装载机,而不是揭露:
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
The ProvidePlugin replaces a symbol in another source through the respective import, but does not expose the symbol on the global namespace. ProvidePlugin 通过相应的导入替换另一个源中的符号,但不会在全局命名空间中公开该符号。 A classic example are jQuery plugins.
一个经典的例子是 jQuery 插件。 Most of them just expect
jQuery
to be defined globally.他们中的大多数人只是希望
jQuery
能够被全局定义。 With the ProvidePlugin
you would make sure that jQuery is a dependency (eg loaded before) and the occurence of jQuery
in their code would be replaced with the webpack raw equivalent of require('jquery')
.使用
ProvidePlugin
您将确保 jQuery 是一个依赖项(例如,之前加载)并且jQuery
在其代码中的出现将替换为 webpack 原始等效的require('jquery')
。
If you have external scripts relying on the symbol to be in the global namespace (like let's say an externally hosted JS, Javascript calls in Selenium or simply accessing the symbol in the browser's console) you want to use the expose-loader
instead.如果您有依赖于全局命名空间中的符号的外部脚本(比如外部托管的 JS、Selenium 中的 Javascript 调用或简单地访问浏览器控制台中的符号),您想要使用
expose-loader
。
In short: ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader
manages runtime dependencies to global symbols.简而言之:ProvidePlugin 管理对全局符号的构建时依赖关系,而
expose-loader
管理对全局符号的运行时依赖关系。
Looks like the window
object is exposed in all modules.看起来
window
对象在所有模块中都暴露了。
Why not just import/require JQuery
and put:为什么不直接导入/需要
JQuery
并放置:
window.$ = window.JQuery = JQuery;
You will need to ensure that this happens before requiring/importing any module that makes use of window.JQuery
, either in a requiring module or in the module where it's being used.您需要确保在要求/导入任何使用
window.JQuery
模块之前发生这种情况,无论是在要求模块中还是在使用它的模块中。
This always worked for me.这总是对我有用。 including for webpack 3
window.$ = window.jQuery = require("jquery");
包括webpack 3
window.$ = window.jQuery = require("jquery");
None of the above worked for me.以上都不适合我。 (and I really don't like the expose-loader syntax).
(而且我真的不喜欢expose-loader 语法)。 Instead,
反而,
I added to webpack.config.js:我添加到 webpack.config.js:
var webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
}
Than all modules have access through jQuery through $.比所有模块都可以通过 $.jQuery 访问。
You can expose it to the window by adding the following to any of your modules bundled by webpack:您可以通过将以下内容添加到 webpack 捆绑的任何模块来将其公开给窗口:
window.$ = window.jQuery = $
Update for Webpack v2 Webpack v2 的更新
Install expose-loader as described by Matt Derrick:按照 Matt Derrick 的描述安装Exposure-loader :
npm install expose-loader --save-dev
Then insert the following snippet in your webpack.config.js
:然后在你的
webpack.config.js
插入以下代码片段:
module.exports = {
entry: {
// ...
},
output: {
// ...
},
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
]
}
};
(from the expose-loader docs ) (来自expose-loader docs )
在我的情况下有效
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
Update for Webpack v2更新 Webpack v2
After webpack 5 upgrade, you could face this warning. webpack 5 升级后,您可能会遇到此警告。
[DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[7].use[0].options)
Simply change the options
to只需将
options
更改为
options: {
exposes: ["$", "jQuery"],
}
will look like this:看起来像这样:
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
{
exposes: ["$", "jQuery"],
}
}]
}]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.