javascript - 使用 webpack 的 ProvidePlugin 时，jQuery 不可用为 "$"

Question

我试图在我的 webpack 应用程序的入口 index.js 文件中使用 jQuery 作为 $，但在浏览器中运行我的应用程序时收到此错误:

Uncaught TypeError: Cannot read property 'fn' of undefined

这是由于我正在导入的模块中有一行名为 bootstrap-switch，所涉及的行是:

$.fn.bootstrapSwitch = function() {

所以我没有将 $ 作为全局变量。我按照 ProvidePlugin docs 上的说明进行操作， 如下所示。我还尝试了 this question 中提供的答案但这没有用。

这是我的 webpack.config.js 文件的缩写版本:

module.exports = {
    entry: {
        main: './src/index.js'
    },
    plugins: {
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    }
}

这是我的 src/index.js 文件:

import 'bootstrap-switch';

console.log('I am running');

如有任何帮助，我们将不胜感激。

编辑

这个问题的前一个版本询问了一个实际上是 ESLint 错误的构建错误。感谢 @UjinT34 帮助我解决了这个问题并专注于上面列出的实际错误。

Answer 1

我将此添加为 future 用户查找的答案。

尝试将 'window.jQuery': 'jquery' 添加到您的 webpack.ProvidePlugin() 设置中。

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