使用 Webpack 将 jQuery 公开给真实的 Window 对象

javascript jquery webpack

2022-08-30 05:16:41

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

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

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

window.$;
window.jQuery;

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

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

答案 1

您需要使用暴露加载程序。

npm install expose-loader --save-dev

当您需要它时，您可以执行此操作：

require("expose?$!jquery");

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

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

更新：从 webpack 2 开始，您需要使用 expos-loader 而不是 expose：

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

答案 2

ProvidePlugin 通过相应的导入替换另一个源中的符号，但不公开全局命名空间上的符号。一个典型的例子是jQuery插件。他们中的大多数只是期望在全球范围内定义。使用，您将确保jQuery是一个依赖项（例如，之前加载），并且在其代码中出现的将替换为 webpack 原始等效物。jQueryProvidePluginjQueryrequire('jquery')

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

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