如何在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未捕获ReferenceError：未在vendor.js：1上定义webpackJsonp

当我尝试使用这个

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库。

主题2

你也有一个expose-loader是必不可少的暴露jquery从库node_modules可能列在dependencies你的package.json。

这使得jquery在node_modules现有的$和jQuery在包括捆绑软件页面全局范围。

主题3

您还包括了ProvidePluginjQuery 的with配置。

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

结论

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

然后，您尝试将供应商捆绑包中的库公开给全局范围（jQuery）。

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

回答

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

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

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

这种正则表达式模式可以解决问题。

{
  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'
    }
};

我希望这不仅可以给您答案，而且可以为您在哪里出问题提供足够的解释。