webpack - Feature Flag 功能发布控制
背景
很多时候我们会不小心把本地调试的代码发布掉，造成了线上的代码出现问题。或者说暂时不希望某些正在开发的代码被执行，造成线上显示的不不正常或推迟上线。
说明
实现
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 }) 这样就能像做开关一样自由的开启功能点。如果设置的功能点过多，那么最好用单独的一个文件保存。
结语
真实情况中会相当的复杂，如何定义还请自行根据经验判断。如有疑问和纠正可以留言。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
