webpack - Feature Flag 功用宣布掌握

2024年2月25日 163次阅读 来源: limichange

背景

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

申明

完成

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

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

结语

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

    原文作者：limichange
    原文地址: https://segmentfault.com/a/1190000002561792
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞