![](/img/trans.png)
[英]Expose module to global Window object with Webpack and Typescript
[英]Expose jQuery to real Window object with Webpack
我想将 jQuery object 暴露给全局 window object,它可以在浏览器的开发人员控制台中访问。 现在在我的 webpack 配置中有以下几行:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
这些行将 jQuery 定义添加到我的 webpack 模块中的每个文件。 但是当我构建项目并尝试在开发人员控制台中访问 jQuery 时,如下所示:
window.$;
window.jQuery;
它说这些属性未定义...
有没有办法来解决这个问题?
您需要使用Exposure-loader 。
npm install expose-loader --save-dev
您可以在需要时执行此操作:
require("expose?$!jquery");
或者您可以在配置中执行此操作:
loaders: [
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
更新:由于2的WebPack的,你需要使用暴露装载机,而不是揭露:
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
ProvidePlugin 通过相应的导入替换另一个源中的符号,但不会在全局命名空间中公开该符号。 一个经典的例子是 jQuery 插件。 他们中的大多数人只是希望jQuery
能够被全局定义。 使用ProvidePlugin
您将确保 jQuery 是一个依赖项(例如,之前加载)并且jQuery
在其代码中的出现将替换为 webpack 原始等效的require('jquery')
。
如果您有依赖于全局命名空间中的符号的外部脚本(比如外部托管的 JS、Selenium 中的 Javascript 调用或简单地访问浏览器控制台中的符号),您想要使用expose-loader
。
简而言之:ProvidePlugin 管理对全局符号的构建时依赖关系,而expose-loader
管理对全局符号的运行时依赖关系。
看起来window
对象在所有模块中都暴露了。
为什么不直接导入/需要JQuery
并放置:
window.$ = window.JQuery = JQuery;
您需要确保在要求/导入任何使用window.JQuery
模块之前发生这种情况,无论是在要求模块中还是在使用它的模块中。
这总是对我有用。 包括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 的描述安装Exposure-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" }
]
}
};
(来自expose-loader docs )
在我的情况下有效
{ 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
更改为
options: {
exposes: ["$", "jQuery"],
}
看起来像这样:
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
{
exposes: ["$", "jQuery"],
}
}]
}]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.