javascript - 使用 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 而不是 expose:

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