我想将jQuery对象公开给全局窗口对象,该对象可以在开发人员控制台的浏览器中访问。现在,在我的webpack配置中,我有以下几行:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
这几行代码将jQuery定义添加到我的webpack模块中的每个文件中,但是当我构建项目并尝试在开发人员控制台中访问jQuery时,如下所示:
window.$;
window.jQuery;
它说这些属性是未定义的...
有什么办法可以解决这个问题吗?
8条答案
按热度按时间ngynwnxp1#
您需要使用expose-loader。
您可以在需要时执行此操作:
也可以在配置中执行此操作:
更新:自webpack 2起,您需要使用expose-loader而不是expose:
58wvjzkj2#
ProvidePlugin通过相应的导入替换另一个源中的符号,但是不公开全局名称空间上的符号,jQuery插件就是一个典型的例子,大多数插件都希望
jQuery
是全局定义的,使用ProvidePlugin
,你可以确保jQuery是一个依赖项(例如之前加载),并且在他们的代码中出现的jQuery
将被替换为require('jquery')
的webpack原始等价物。如果您有依赖于全局名称空间中的符号的外部脚本(比如说外部托管的JS、Selenium中的Javascript调用或只是在浏览器的控制台中访问符号),您希望使用
expose-loader
。简而言之:ProvidePlugin管理构建时对全局符号的依赖,而
expose-loader
管理运行时对全局符号的依赖。nafvub8i3#
看起来
window
对象在所有模块中都公开。为什么不直接导入/要求
JQuery
并放入:在请求/导入任何使用
window.JQuery
的模块之前,您需要确保这一点,无论是在请求模块中还是在使用它的模块中。mwyxok5s4#
这对我来说总是有效的。包括webpack 3
window.$ = window.jQuery = require("jquery");
dldeef675#
以上这些方法对我都不起作用(而且我真的不喜欢expose-loader语法)。
我添加到webpack.config.js:
所有模块都可以通过$通过jQuery访问。
您可以通过将以下内容添加到webpack捆绑的任何模块中,将其显示在窗口中:
ht4b089n6#
Webpack v2的更新
按照Matt Derrick所述安装expose-loader:
然后在
webpack.config.js
中插入以下代码段:(from曝光加载器文档)
vfhzx4xs7#
对我来说很管用
mwecs4sa8#
Webpack 5升级后,您可能会遇到此警告。
只需将
options
更改为会是这样的