使用Webpack将jQuery暴露给真正的Window对象

Question

我不想将jQuery对象暴露给可在浏览器中的开发人员控制台中访问的全局窗口对象.现在在我的webpack配置中,我有以下几行:

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

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

window.$;
window.jQuery;

它说这些属性是未定义的......

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

Answer 1

您需要使用expose-loader.

npm install expose-loader --save-dev

您可以在需要时执行此操作:

require("expose?$!jquery");

或者您可以在配置中执行此操作:

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

更新:从webpack 2开始,您需要使用expose-loader而不是公开:

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

Answer 2

ProvidePlugin通过相应的导入替换另一个源中的符号,但不会在全局命名空间中公开该符号.一个经典的例子是jQuery插件.他们中的大多数人只希望jQuery在全球范围内定义.使用它ProvidePlugin可以确保jQuery是一个依赖项(例如之前加载),并且jQuery它们代码中的出现将被替换为webpack raw等价物require('jquery').

如果你有依赖于符号的外部脚本在全局命名空间中(比如让我们说外部托管的JS,在Selenium中调用Javascript或者只是在浏览器的控制台中访问符号)你想要使用它expose-loader.

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

Answer 3

看起来该window对象在所有模块中都公开了.

为什么不直接导入/要求JQuery和放置:

window.$ = window.JQuery = JQuery;

在您的入口点模块？

Answer 4

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

Answer 5

以上都不适合我。（而且我真的不喜欢expose-loader 语法）。反而，

我添加到 webpack.config.js：

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

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

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

window.$ = window.jQuery = $