webpack - Feature Flag 功能发布控制

标签: javascript webpack | 发表时间:2015-02-21 16:42 | 作者:limichange
出处:http://segmentfault.com/blogs

背景

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

说明

实现

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

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

结语

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

相关 [webpack feature flag] 推荐:

webpack - Feature Flag 功能发布控制

- - SegmentFault 最新的文章
很多时候我们会不小心把本地调试的代码发布掉,造成了线上的代码出现问题. 或者说暂时不希望某些正在开发的代码被执行,造成线上显示的不不正常或推迟上线. webpack.config.js里这样写. 配置完成后,我们可以这样写代码. 在webpack编译后会变成这个样子. 这个时候我们就要把 __DEBUG__设为 false了,这样在编译完成后就会变成这个样子.

Webpack 和 React 小书

- - SegmentFault 最新的文章
Webpack 和 React 小书. 这本小书的目的是引导你进入 React 和 Webpack 的世界. 他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣. 这本小书会提供所有相关的技能. 如果你只是对 React 感兴趣,那可以跳过 Webpack 相关的内容,反之亦然. 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React.

轻松入门React和Webpack

- - SegmentFault 最新的文章
小广告:更多内容可以看 我的博客和 读书笔记. 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰. 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.

WebPack常用功能介绍

- - SegmentFault 最新的文章
WebPack常用功能介绍. Webpack是一款用户打包前端模块的工具. 主要是用来打包在浏览器端使用的javascript的. 同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等. 个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求.

vue 文件多了, webpack 热加载很慢? - V2EX

- -
点我最近刚好在看 webpack,如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章,不要脸的放一下博客. 如果时间不够只是想解决这个问题,那么我尝试正儿八经回答一下. 1.把 webpack 升级到 4.0. 3.使用 DLLplugin,happypack 等构建加速插件. 4.检查 loader/eslint 是否配置错误 /不合理.

聊一聊 webpack 的打包优化实践

- - 掘金前端
去年接触了公司内一个开发运行了两年多的项目,整体应用是基于 React 技术栈的,多个单页应用有构成了多页应用. 可以理解为比较独立的子业务之间是 MPA 形式跳转,而子业务内部则是 SPA 形式. 项目的构建使用了 webpack,发现存在较大问题:. 在生产环境上线编译大致需要 13 min+;.