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

Question

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

Uncaught TypeError: Cannot read property 'fn' of undefined

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

$.fn.bootstrapSwitch = function() {

所以我没有 $ 作为全局变量。我按照 ProvidePlugin docs, as shown below. I also tried the answer provided in 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

no-undef 是 ESlint 错误。它不知道你的 webpack 设置。你可以 specify global variables in 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'
        } )
    ]
};

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

jQuery not available as "$" when using webpack's ProvidePlugin

javascript

jquery

webpack

webpack-provide-plugin