成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack - Feature Flag 功能發(fā)布控制

sourcenode / 1826人閱讀

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

背景

很多時候我們會不小心把本地調(diào)試的代碼發(fā)布掉，造成了線上的代碼出現(xiàn)問題?；蛘哒f暫時不希望某些正在開發(fā)的代碼被執(zhí)行，造成線上顯示的不不正?；蛲七t上線。

說明 實現(xiàn)

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($);
發(fā)布

這個時候我們就要把__DEBUG__設(shè)為false了，這樣在編譯完成后就會變成這個樣子。

var $ = require("./js/lib/jquery");

(false) && console.log($);

這樣子在執(zhí)行的時候就永遠不會執(zhí)行調(diào)試的代碼了，然后在發(fā)布壓縮的時候會被過濾掉。

var $ = require("./js/lib/jquery");

在大部分的壓縮中，因為這句代碼絕對不會被執(zhí)行，因此被當(dāng)成了廢代碼直接去除掉了。

優(yōu)點

是一個硬開關(guān)。如果是用js本身維護一個配置對象也可以達成這樣的效果，但代碼依然會跑到線上。使用本方法能強制的把代碼濾掉，完全的避免資源浪費。

代碼會更加有條理，功能相關(guān)的部分會有規(guī)律的聚集到一起。

代碼上線可以更靈活，不必因為代碼沒有完全實現(xiàn)而推遲上線，沒有完成的功能關(guān)閉即可。

靈活下線。線上如果有BUG，立馬關(guān)閉功能。我感覺這種方法比代碼版本回滾要好得多，因為BUG可能不是上個版本產(chǎn)生的。

缺點

環(huán)境須用webpack，當(dāng)然其他的工具可能也可以做到。

工程復(fù)雜度增加，成員要嚴(yán)格的做flag條件設(shè)置。

擴展

可以做一個功能清單，這樣就有了實際的意義了。

new webpack.DefinePlugin({
  __DEBUG__      : true,
  __F_EDITOR__   : true,
  __F_TREE_LIST__: false,
  __F_SIGN_UP__  : true
})

這樣就能像做開關(guān)一樣自由的開啟功能點。如果設(shè)置的功能點過多，那么最好用多帶帶的一個文件保存。

結(jié)語

真實情況中會相當(dāng)?shù)膹?fù)雜，如何定義還請自行根據(jù)經(jīng)驗判斷。如有疑問和糾正可以留言。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85543.html

相關(guān)文章

  • 一個 PWA 的誕生

    摘要：不是一個新名詞，早在年已經(jīng)提出這個思想，但是直到的發(fā)布，終于可以在中添加到主屏，只有安卓和都能使用的基本功能，它才算是真的開始走近大眾。 原文鏈接：https://ssshooter.com/2018-09... PWA（Progressive Web Apps）雖然是網(wǎng)頁應(yīng)用，但是可以帶來媲美原生的用戶體驗，其中包含離線可用，后臺推送等功能。PWA 不是一個新名詞，早在 2015 年...

    蘇丹 評論0 收藏0

  • 用ES6編寫AngularJS程序是怎樣一種體驗

    摘要：不用我贅述，前端開發(fā)人員一定耳熟能詳。命令會用這個配置，生成的結(jié)果都會給文件名加，文件也會壓縮?？捎霉ぞ呓榻B啟動調(diào)試服務(wù)器，使用作為配置，不直接生成物理文件，直接內(nèi)存級別響應(yīng)調(diào)試服務(wù)器資源請求。 AngularJS不用我贅述，前端開發(fā)人員一定耳熟能詳。有人稱之為MVWhatever框架，意思是使用AngularJS，你可以參考任意范式進行應(yīng)用開發(fā)，無論是MVC、還是MVVVM都信手拈來...

    lastSeries 評論0 收藏0

  • Webpack 愛與恨

    摘要：關(guān)于標(biāo)題，為什么是愛與恨因為在剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，設(shè)計不合理。用戶只有首次訪問需要下載全部靜態(tài)資源，以后的訪問都直接使用緩存資源。首先，在中添加字段，當(dāng)為時，則開啟服務(wù)。例如請求的是則返回中的數(shù)據(jù)。 關(guān)于標(biāo)題，為什么是愛與恨？ 因為在 webpack 剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，api 設(shè)計不合理。隨著 webpa...

    HmyBmny 評論0 收藏0

  • 基于 NPM 的大型 React 單頁應(yīng)用探索（多場景多方案）

    摘要：基于的大型單頁應(yīng)用探索多場景多方案原文地址未完待續(xù)本文目標(biāo)構(gòu)建基于的大型單頁應(yīng)用以及多頁面，支持多模塊協(xié)同開發(fā)分布式構(gòu)建與發(fā)布。 基于 NPM 的大型 React 單頁應(yīng)用探索（多場景多方案） 原文地址：https://github.com/luqin/blog/issues/10 未完待續(xù)…… 本文目標(biāo)構(gòu)建基于 NPM 的大型 React 單頁應(yīng)用（以及多頁面），支持多模塊協(xié)同開發(fā)、...

    tinylcy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<