webpack - Feature Flag 功能发布控制
- - SegmentFault 最新的文章很多时候我们会不小心把本地调试的代码发布掉,造成了线上的代码出现问题. 或者说暂时不希望某些正在开发的代码被执行,造成线上显示的不不正常或推迟上线. webpack.config.js里这样写. 配置完成后,我们可以这样写代码. 在webpack编译后会变成这个样子. 这个时候我们就要把 __DEBUG__设为 false了,这样在编译完成后就会变成这个样子.
很多时候我们会不小心把本地调试的代码发布掉,造成了线上的代码出现问题。或者说暂时不希望某些正在开发的代码被执行,造成线上显示的不不正常或推迟上线。
webpack.config.js里这样写
var webpack = require('webpack');
module.exports = {
entry: {
index: "./app/index.js"
},
output: {
path: './run',
filename: "index.bundle.js"
},
plugins: [
new webpack.DefinePlugin({
__DEBUG__: true
})
],
devtool: "#inline-source-map"
};
配置完成后,我们可以这样写代码
var $ = require('./js/lib/jquery');
__DEBUG__ && console.log($);
在webpack编译后会变成这个样子
var $ = require('./js/lib/jquery');
(true) && console.log($);
这个时候我们就要把 __DEBUG__
设为 false
了,这样在编译完成后就会变成这个样子。
var $ = require('./js/lib/jquery');
(false) && console.log($);
这样子在执行的时候就永远不会执行调试的代码了,然后在发布压缩的时候会被过滤掉。
var $ = require('./js/lib/jquery');
在大部分的压缩中,因为这句代码绝对不会被执行,因此被当成了废代码直接去除掉了。
可以做一个功能清单,这样就有了实际的意义了。
new webpack.DefinePlugin({
__DEBUG__ : true,
__F_EDITOR__ : true,
__F_TREE_LIST__: false,
__F_SIGN_UP__ : true
})
这样就能像做开关一样自由的开启功能点。如果设置的功能点过多,那么最好用单独的一个文件保存。
真实情况中会相当的复杂,如何定义还请自行根据经验判断。如有疑问和纠正可以留言。