javascript - 使用 webpack 的 ProvidePlugin 时，jQuery 不能作为“$”使用

Question

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

未捕获的类型错误：无法读取未定义的属性“fn”

这是由于我正在导入的模块中的一行称为bootstrap-switch，而有问题的行是：

$.fn.bootstrapSwitch = function() {

所以我没有$作为一个全局变量工作。我按照ProvidePlugin docs上的说明进行操作，如下所示。我也尝试了这个问题中提供的答案，但没有奏效。

这是我的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

no-undef是一个 ESlint 错误。它不知道您的 webpack 设置。您可以在 esling config 中指定全局变量：

{
    "globals": {
        "$": "readonly",
        "jQuery": "readonly"
    }
}

Answer 2

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

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

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