webpack - Feature Flag 功能發布控制

sourcenode 發布于2019-08-21 10:26 / 1808人閱讀

摘要：使用本方法能強制的把代碼濾掉，完全的避免資源浪費。代碼會更加有條理，功能相關的部分會有規律的聚集到一起。代碼上線可以更靈活，不必因為代碼沒有完全實現而推遲上線，沒有完成的功能關閉即可。線上如果有，立馬關閉功能。

背景

很多時候我們會不小心把本地調試的代碼發布掉，造成了線上的代碼出現問題。或者說暫時不希望某些正在開發的代碼被執行，造成線上顯示的不不正常或推遲上線。

說明實現

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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