如何将 jquery-migrate 与 webpack 一起使用？

Question

之后npm install jquery-migrate，我可以只require('jquery-migrate');在主scripts.js文件中。这工作正常：

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？

Answer 1

我们在工作中所做的就是将其纳入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：)