如何在webpack中使用jquery-migrate?

时间:2016-06-10 13:20:16

标签: javascript webpack jquery-migrate

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?

3 个答案:

答案 0 :(得分:1)

如果您将其内嵌到index.html文件中。您可以使用某种环境变量来设置是否希望使用html-webpack-plugin显示脚本。此插件支持您可以使用的动态模板。

documentation写得很好,我建议你看看它!

答案 1 :(得分: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不需要aliasjquery-migrate,顺便说一下:)

答案 2 :(得分:1)

您可以通过__DEV__创建可在整个应用程序中访问的全局webpack.config.js变量。只需将以下内容添加到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,因此您可能需要添加'window.jQuery': 'jquery'行到webpack.ProvidePlugin构造函数:

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