如何在Webpack中使用jQuery-migrate？

Question

在运行了npm install jquery-migrate之后，我可以在主要的scripts.js文件中直接使用require('jquery-migrate');。这样做是可行的。

console.log(jQuery.migrateVersion); // JQMIGRATE: Migrate is installed with logging active, version 3.0.0

现在，我想设置生产版本中没有 jquery-migrate。

webpack.config.js:

var dev = process.env.NODE_ENV !== 'prod';
var webpack = require('webpack');
var dist = '/dist/js';

module.exports = {
    context: __dirname,
    entry: __dirname + '/src/js/scripts.js',
    output: {
        path: __dirname + dist,
        filename: 'scripts.js'
    },
    resolve: {
        alias: {
            'jquery': 'jquery/src/jquery',
            'jquery-migrate': 'jquery-migrate'
        }
    },
    plugins: dev ? [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'jquery-migrate': 'jquery-migrate'
        })
    ] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        })
    ]
};

这个不起作用：

console.log(jQuery.migrateVersion); // Undefined

如何从webpack.config加载jquery-migrate？

- François Romain

Answer 1

您可以通过webpack.config.js创建一个全局的__DEV__变量，在整个应用程序中都可以访问。只需将以下内容添加到您的plugins数组中：

plugins: [
    new webpack.DefinePlugin({
        __DEV__: dev
    }),
    // other plugins
]

Webpack - DefinePlugin

使用以下命令安装jquery-migrate：

npm install jquery-migrate --save-dev

然后在您的应用程序入口点（例如app.js）中添加以下内容：

if (__DEV__) {
    require("jquery-migrate");
}

此外，一些 jQuery 插件（例如此刻最新版本的 jqueryCaret）引用了 window.jQuery 而非仅仅是 jQuery，因此您可能需要在 webpack.ProvidePlugin 构造函数中添加 'window.jQuery': 'jquery' 这一行代码。

plugins: [
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        '$': 'jquery',
        'window.jQuery': 'jquery',
    }),
    // other plugins
]

- TheInderpreter

Answer 2

我们在工作中做的是将require放在一个生产检查中。

if (__DEV__) {
  require('jquery-migrate');
}

你也可以使用这个检查：if (process.env.NODE_ENV !== 'production')。

这种方式，在打包用于生产环境的代码时，webpack 会视它为无用代码，并且不解析 require，因此也就不会包括该模块。

为了让这些检查生效，你应该使用提供插件来定义它们。

new webpack.ProvidePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify(dev) // Or some other check
    },
    __DEV__: JSON.stringify(true) // or something
})

ProvidePlugin或alias对于jquery-migrate都不是必需的，顺便说一下 :)

- SimenB

Answer 3

如果您将其内联到您的index.html文件中。您可以使用某种环境变量来设置是否要使用html-webpack-plugin显示脚本。该插件支持您可以使用的动态模板。 文档写得很好，我建议您查看一下！

- Sean Larkin