如何使用 jquery-migrate with webpack?
How to use jquery-migrate with webpack?
在 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
如何加载 jquery- 从 webpack.config 迁移?
如果您将其内联到您的 index.html
文件中。您可以使用某种环境变量来设置是否要使用 html-webpack-plugin
显示脚本。此插件支持您可以使用的动态模板。
documentation写得很好,推荐大家看看!
我们在工作中所做的是将 require
放入生产检查中。
if (__DEV__) {
require('jquery-migrate');
}
你也可以这样检查:if (process.env.NODE_ENV !== 'production')
。
这样,webpack 在为生产打包时会看到它是死代码,不会解析 require
,因此包含模块。
要使这些检查生效,您应该使用 provide 插件来定义它们。
new webpack.ProvidePlugin({
'process.env': {
NODE_ENV: JSON.stringify(dev) // Or some other check
},
__DEV__: JSON.stringify(true) // or something
})
jquery-migrate
不需要 ProvidePlugin
或 alias
,顺便说一句 :)
您可以创建一个全局 __DEV__
变量,可通过 webpack.config.js
在整个应用程序中访问。只需将以下内容添加到您的 plugins
数组中:
plugins: [
new webpack.DefinePlugin({
__DEV__: dev
}),
// other plugins
]
安装 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
]
在 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
如何加载 jquery- 从 webpack.config 迁移?
如果您将其内联到您的 index.html
文件中。您可以使用某种环境变量来设置是否要使用 html-webpack-plugin
显示脚本。此插件支持您可以使用的动态模板。
documentation写得很好,推荐大家看看!
我们在工作中所做的是将 require
放入生产检查中。
if (__DEV__) {
require('jquery-migrate');
}
你也可以这样检查:if (process.env.NODE_ENV !== 'production')
。
这样,webpack 在为生产打包时会看到它是死代码,不会解析 require
,因此包含模块。
要使这些检查生效,您应该使用 provide 插件来定义它们。
new webpack.ProvidePlugin({
'process.env': {
NODE_ENV: JSON.stringify(dev) // Or some other check
},
__DEV__: JSON.stringify(true) // or something
})
jquery-migrate
不需要 ProvidePlugin
或 alias
,顺便说一句 :)
您可以创建一个全局 __DEV__
变量,可通过 webpack.config.js
在整个应用程序中访问。只需将以下内容添加到您的 plugins
数组中:
plugins: [
new webpack.DefinePlugin({
__DEV__: dev
}),
// other plugins
]
安装 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
]