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;

在需要/导入任何使用window.JQuery的模块之前，您需要确保在需求模块或使用它的模块中发生这种情况。

Answer 4

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

Answer 5

在我的案例中

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

Answer 6

更新Webpack v2

安装expose-loader，如Matt Derrick所述：

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 7

以上都不对我有用。相反，

我添加到了webpack.config.js：

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

比所有模块都能通过jQuery通过$访问。

您可以使用以下方法将其显示在窗口中：

window.$ = window.jQuery = $

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

7 个答案: