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

Question

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

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

这是由于我正在导入的模块中有一行名为 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

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

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

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

Answer 2

no-undef 是一个 ESlint 错误。它不知道您的 webpack 设置。你可以specify global variables in esling config:

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