使用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

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

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

window.$ = window.JQuery = JQuery;

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