javascript - 如何在 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 文件中使用 jquery import $ from 'jquery'。我做错了什么 ？有帮助吗？谢谢你。

Answer 1

所以你的 webpack.config.js 中的主题很少，其中一些是冲突的。只是列出它们，以便我可以更好地理解我认为您正在努力实现的目标。

主题 1

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

主题二

您还有一个expose-loader，它是必不可少的，它从 node_modules 中公开 jquery 库，可能在 dependencies< 中列出 的 package.json。

这使得 node_modules 中的 jquery 在页面的全局范围内可用作 $ 和 jQuery包含您的 bundle 的位置。

主题三

您还包含了带有 jQ​​uery 配置的 ProvidePlugin。

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

结论

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

然后您将尝试将 vendor 包中的库公开到全局范围 (jQuery)。

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

回答

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

首先，检查jquery 的package.json 文件dependencies。如果它在那里你想删除它，如果你打算使用你的 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: '$'
  }]
}

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

最后，您需要告诉 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'
    }
};

我希望这不仅能给您答案，还能对您出错的地方提供足够的解释。