转载

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 })

这样就能像做开关一样自由的开启功能点。如果设置的功能点过多，那么最好用单独的一个文件保存。

结语

真实情况中会相当的复杂，如何定义还请自行根据经验判断。如有疑问和纠正可以留言。

正文到此结束

所属分类：编程技术

本文标签： web 调试 UI jquery 配置 map 开发 list js App 编译代码
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

webpack - Feature Flag 功能发布控制

背景

说明

实现

发布

优点

缺点

扩展

结语

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流