webpackFeatureFlag功用宣布掌握

背景

许多时刻我们会不小心把当地调试的代码宣布掉，形成了线上的代码出现问题。或者说暂时不愿望某些正在开辟的代码被实行，形成线上显现的不不正常或推延上线。

申明

完成

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');


在大部份的紧缩中，由于这句代码相对不会被实行，因而被当成了废代码直接去除掉了。

长处

• 是一个硬开关。假如是用js自身保护一个设置对象也能够杀青如许的结果，但代码依旧会跑到线上。运用本要领能强迫的把代码滤掉，完整的防止资本糟蹋。
• 代码会越发有条理，功用相干的部份会有规律的群集到一同。
• 代码上线能够更天真，没必要由于代码没有完整完成而推延上线，没有完成的功用封闭即可。
• 天真下线。线上假若有BUG，立马封闭功用。我觉得这类要领比代码版本回滚要好很多，由于BUG能够不是上个版本发生的。

瑕玷

• 环境须用webpack，固然其他的东西能够也能够做到。
• 工程庞杂度增添，成员要严厉的做flag前提设置。

扩大

能够做一个功用清单，如许就有了现实的意义了。

new webpack.DefinePlugin({
__DEBUG__ : true,
__F_EDITOR__ : true,
__F_TREE_LIST__: false,
__F_SIGN_UP__ : true
})


如许就可以像做开关一样自在的开启功用点。假如设置的功用点过量，那末最好用零丁的一个文件保留。

结语

真实情况中会相称的庞杂，怎样定义还请自行依据履历推断。若有疑问和改正能够留言。