用Webpack向真实窗口对象公开jQuery

Question

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

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

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

window.$;
window.jQuery;

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

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

Answer 1

看起来窗口对象在所有模块中都公开。

为什么不直接导入/要求＜code＞JQuery＜/code＞并放入：

window.$ = window.JQuery = JQuery;

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

Answer 2

一个典型的例子是jQuery插件。他们中的大多数只是期望jQuery是全局定义的。使用Pro视频插件，您可以确保jQuery是一个依赖项（例如之前加载的），并且在他们的代码中出现的jQuery将被替换为webpad原始等效的要求（'jQuery'）。

如果你有外部脚本依赖于全局命名空间中的符号（比如说外部托管的JS，Selenium中的Javascript调用或只是在浏览器控制台中访问符号），你想改用暴露加载器。

简而言之：ProVidePlugin管理对全局符号的构建时依赖关系，而exex-loader管理对全局符号的运行时依赖关系。

Answer 3

您需要使用公开加载器。

npm install expose-loader --save-dev

您可以在需要时这样做：

require("expose?$!jquery");

或者您可以在您的配置中这样做:

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

更新：从webpack 2开始，您需要使用expose加载程序而不是expose：

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