webpack - Feature Flag 功能发布控制

sourcenode 发布于2019-08-21 10:26 / 1747人阅读

摘要：使用本方法能强制的把代码滤掉，完全的避免资源浪费。代码会更加有条理，功能相关的部分会有规律的聚集到一起。代码上线可以更灵活，不必因为代码没有完全实现而推迟上线，没有完成的功能关闭即可。线上如果有，立马关闭功能。

背景

很多时候我们会不小心把本地调试的代码发布掉，造成了线上的代码出现问题。或者说暂时不希望某些正在开发的代码被执行，造成线上显示的不不正常或推迟上线。

说明实现

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

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

结语

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

云服务器 GPU云服务器灰度发布功能控制面板文件功能对象存储oss权限控制功能 feature

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85543.html

一个 PWA 的诞生

摘要：不是一个新名词，早在年已经提出这个思想，但是直到的发布，终于可以在中添加到主屏，只有安卓和都能使用的基本功能，它才算是真的开始走近大众。原文链接：https://ssshooter.com/2018-09... PWA（Progressive Web Apps）虽然是网页应用，但是可以带来媲美原生的用户体验，其中包含离线可用，后台推送等功能。PWA 不是一个新名词，早在 2015 年...

苏丹 2019-08-23 12:00 评论0 收藏0
用ES6编写AngularJS程序是怎样一种体验

摘要：不用我赘述，前端开发人员一定耳熟能详。命令会用这个配置，生成的结果都会给文件名加，文件也会压缩。可用工具介绍启动调试服务器，使用作为配置，不直接生成物理文件，直接内存级别响应调试服务器资源请求。 AngularJS不用我赘述，前端开发人员一定耳熟能详。有人称之为MVWhatever框架，意思是使用AngularJS，你可以参考任意范式进行应用开发，无论是MVC、还是MVVVM都信手拈来...

lastSeries 2019-08-19 18:17 评论0 收藏0
Webpack 爱与恨

摘要：关于标题，为什么是爱与恨因为在刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，设计不合理。用户只有首次访问需要下载全部静态资源，以后的访问都直接使用缓存资源。首先，在中添加字段，当为时，则开启服务。例如请求的是则返回中的数据。关于标题，为什么是爱与恨？因为在 webpack 刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，api 设计不合理。随着 webpa...

HmyBmny 2019-08-20 16:47 评论0 收藏0
基于 NPM 的大型 React 单页应用探索（多场景多方案）

摘要：基于的大型单页应用探索多场景多方案原文地址未完待续本文目标构建基于的大型单页应用以及多页面，支持多模块协同开发分布式构建与发布。基于 NPM 的大型 React 单页应用探索（多场景多方案）原文地址：https://github.com/luqin/blog/issues/10 未完待续…… 本文目标构建基于 NPM 的大型 React 单页应用（以及多页面），支持多模块协同开发、...

tinylcy 2019-08-22 10:59 评论0 收藏0