使用带有 jQuery 的 webpack 时出错

Question

我刚开始使用 Webpack，在尝试使用 jQuery 时遇到问题。我是 Webpack 的新手，如果我的问题看起来很基础，请见谅。

这是我的 webpack.config.js:

var webpack = require("webpack");
var path = require("path");
var bower_dir = __dirname + "/public/js/bower_components";
var compiled_dir = __dirname + "/public/js/compiled";

module.exports = {
    entry: {
        signup: compiled_dir + "/signup"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            "window.jQuery" : "jquery",
            "root.jQuery" : "jquery"
        })
    ],
    resolve: {
        alias: {
            jquery : bower_dir + "/jquery/src/jquery",
        }
    },
    output: {
        path: path.join(__dirname, "public/js/dist"),
        filename: "[name].bundle.js"
    }

};

因为我正在使用 ProvidePlugin（用于 jQuery 插件），所以我的文件开头没有 require("jquery")。但是，在执行时，我在控制台上得到了这个输出：

TypeError: jQuery.expr is undefined http://localhost:9000/js/dist/signup.bundle.js Line 6250

你有什么线索吗？

提前致谢。

Answer 1

通过删除 webpack.config.js 中的 "resolve" 部分并使用 npm 安装 jquery 来解决。但是，如果有人能向我解释为什么它现在有效，我将不胜感激:-)

Answer 2

根据此处提出的问题 - https://github.com/webpack/webpack/issues/1066，这似乎是 earlier/current 版本 JQuery 的问题。

综上所述link，JQuery使用RequireJS，其AMD实现与实际AMD规范不同。这可能会在以后的版本中得到修复。现在，尝试使用 dist 文件夹，它也能正常工作。只需在此处更改此行 -

alias: {
        jquery : bower_dir + "/jquery/src/jquery",
    }

对此 -

alias: {
        jquery : bower_dir + "/jquery/dist/jquery",
    }

同时，Alexander O'Mara 提供了一个 Webpack 加载器来解决这个问题，还有一个关于如何使用它的教程 -

https://github.com/AlexanderOMara/amd-define-factory-patcher-loader http://alexomara.com/blog/webpack-and-jquery-include-only-the-parts-you-need/

使用带有 jQuery 的 webpack 时出错

Error when using webpack with jQuery

javascript

jquery

node.js

webpack