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

Question

我想将 jQuery 对象公开给可在浏览器的开发人员控制台内访问的全局 window 对象。现在在我的 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?$' }
]

UPDATE：从 webpack 2 开始，您需要使用 expose-loader 而不是 expose:

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

Answer 2

ProvidePlugin 通过相应的导入替换另一个源中的符号，但不会在全局命名空间上公开该符号。一个典型的例子是 jQuery 插件。他们中的大多数人只是希望 jQuery 被全局定义。使用 ProvidePlugin 你会确保 jQuery 是一个依赖项（例如之前加载）并且 jQuery 在他们的代码中出现将被替换为 [=13= 的 webpack 原始等价物].

如果你有外部脚本依赖于全局命名空间中的符号（比如假设一个外部托管的 JS，Javascript 在 Selenium 中调用或者只是访问浏览器控制台中的符号）你想要请改用 expose-loader。

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

Answer 3

以我为例

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

Answer 4

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

为什么不直接 import/require JQuery 然后放：

window.$ = window.JQuery = JQuery;

您需要确保在 requiring/importing 任何使用 window.JQuery 的模块之前发生这种情况，无论是在需要的模块中还是在使用它的模块中。

Answer 5

Webpack v2 更新

按照 Matt Derrick 的描述安装 expose-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）

Answer 6

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

Answer 7

以上的

None 对我有用。（而且我真的不喜欢 expose-loader 语法）。相反，

我添加到webpack.config.js:

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

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

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

window.$ = window.jQuery = $

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

Expose jQuery to real Window object with Webpack

javascript

jquery

webpack