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

Question

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

未捕获的TypeError：无法读取未定义的属性“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"
    }
}