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

^\/$|(\/[a-zA-Z_0-9-]+)+$是ESlint错误。它不知道您的Webpack设置。您可以specify global variables in esling config：

no-undef

Answer 2

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

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

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

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

2 个答案: