如何在 webpack 中导入 jquery

Question

我在 webpack 上使用 jquery 时遇到问题。 我的代码：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    entry: {
        vendor: [
            './src/main/webapp/js/vendor/jquery-3.3.1.min.js',
            // './src/main/webapp/js/vendor/fs.js',
            './src/main/webapp/js/vendor/google-adsense.js',
            './src/main/webapp/js/vendor/jquery.menu-aim.min.js',
            './src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
        ],
        app: './src/main/assets/js/desktop/app.js',
        mobile: './src/main/assets/js/mobile/app.js',
        touch: './src/main/assets/js/touch/app.js',
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?jQuery!expose-loader?$'
            }
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(['src/main/webapp/assets']),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // Specify the common bundle's name.
        }),
        new UglifyJsPlugin({
            test: /\.js$/,
            sourceMap: process.env.NODE_ENV === "development"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './src/main/webapp/js')
    }
};

上面的代码编译时，控制台会抛出这个错误

vendor.js:1 Uncaught ReferenceError: webpackJsonp is not defined 在 vendor.js:1

当我尝试使用它时

externals: {
  jquery: 'jQuery'
}

它抛出

vendor.js:1 Uncaught ReferenceError: jQuery is not defined
    at Object.231 (vendor.js:1)
    at o (common.js:1)
    at Object.228 (vendor.js:1)
    at o (common.js:1)
    at window.webpackJsonp (common.js:1)
    at vendor.js:1

我在我的核心 js 文件 import $ from 'jquery' 中使用 jquery。 我做错了什么 ？有什么帮助吗？谢谢你。

Answer 1

所以您的webpack.config.js 中的主题很少，其中一些是冲突的。只是将它们列出来，以便我更好地理解我认为您想要实现的目标。

主题 1

您有一个名为 vendor 的条目，它明确引用了您可能已下载并放置在指定目录中的缩小 jQuery 库。

主题 2

您还有一个expose-loader，它对于从其node_modules 中公开jquery 库至关重要，可能在您的package.json 的dependencies 中列出。

这使得node_modules 中的jquery 在包含您的捆绑包的页面的全局范围内以$ 和jQuery 的形式可用。

主题 3

您还为 jQuery 配置了 ProvidePlugin。

ProvidePlugin 应该将依赖项注入到您的模块代码范围中，这意味着您不需要使用 import $ from 'jquery' 而不是 $ 和 jQuery 将已经在您的所有模块中可用。

结论

根据我收集到的信息我认为您正在尝试将 jQuery 从静态文件中的 ./src/main/webapp/js/vendor/jquery-3.3.1.min.js 捆绑到供应商捆绑包中。

然后您尝试将供应商捆绑包中的库公开到全局范围 (jQuery)。

然后让您的应用程序代码能够从供应商捆绑包在全局范围内提供的内容中导入 jQuery。

回答

因此，如果您正在这样做，则需要执行以下操作。

首先，检查您的package.json 文件dependencies 中的jquery。如果您想删除它，如果您打算使用 jquery-3.3.1.min.js 文件而不是为您的应用程序提供 jQuery，则不需要它。

其次，将expose-loader 中的test 更改为当它在您的条目中看到您的jquery-3.3.1.min.js 文件时触发，而不是从您的node_modules 的jquery 依赖项中解析它。

这个正则表达式模式应该可以解决问题。

{
  test: /jquery.+\.js$/,
  use: [{
      loader: 'expose-loader',
      options: 'jQuery'
  },{
      loader: 'expose-loader',
      options: '$'
  }]
}

第三，如果您要使用 import $ from 'jquery' 显式导入库，请删除 ProvidePlugin，您不需要它。

最后，您需要告诉 webpack 当它看到 jquery 的导入时，它可以在全局范围内从 window.jQuery 解决这个问题。您可以使用已引用的外部配置来执行此操作。

externals: {
  jquery: 'jQuery'
}

完成所有这些更改后，您最终应该会得到一个如下所示的 webpack.config.js 文件。

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    entry: {
        vendor: [
            './src/main/webapp/js/vendor/jquery-3.3.1.min.js',
            // './src/main/webapp/js/vendor/fs.js',
            './src/main/webapp/js/vendor/google-adsense.js',
            './src/main/webapp/js/vendor/jquery.menu-aim.min.js',
            './src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
        ],
        app: './src/main/assets/js/desktop/app.js',
        mobile: './src/main/assets/js/mobile/app.js',
        touch: './src/main/assets/js/touch/app.js',
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /jquery.+\.js$/,
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                },{
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(['src/main/webapp/assets']),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // Specify the common bundle's name.
        }),
        new UglifyJsPlugin({
            test: /\.js$/,
            sourceMap: process.env.NODE_ENV === "development"
        })
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './src/main/webapp/js')
    },
    externals: {
        jquery: 'jQuery'
    }
};

我希望这不仅能给你答案，而且能充分解释你哪里出错了。