資訊專欄INFORMATION COLUMN
摘要：使用本方法能強(qiáng)制的把代碼濾掉，完全的避免資源浪費(fèi)。代碼會(huì)更加有條理，功能相關(guān)的部分會(huì)有規(guī)律的聚集到一起。代碼上線可以更靈活，不必因?yàn)榇a沒有完全實(shí)現(xiàn)而推遲上線，沒有完成的功能關(guān)閉即可。線上如果有，立馬關(guān)閉功能。
背景
很多時(shí)候我們會(huì)不小心把本地調(diào)試的代碼發(fā)布掉，造成了線上的代碼出現(xiàn)問題?；蛘哒f暫時(shí)不希望某些正在開發(fā)的代碼被執(zhí)行，造成線上顯示的不不正?；蛲七t上線。
說明 實(shí)現(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編譯后會(huì)變成這個(gè)樣子
var $ = require("./js/lib/jquery");
(true) && console.log($);
發(fā)布
這個(gè)時(shí)候我們就要把__DEBUG__設(shè)為false了，這樣在編譯完成后就會(huì)變成這個(gè)樣子。
var $ = require("./js/lib/jquery");
(false) && console.log($);
這樣子在執(zhí)行的時(shí)候就永遠(yuǎn)不會(huì)執(zhí)行調(diào)試的代碼了，然后在發(fā)布?jí)嚎s的時(shí)候會(huì)被過濾掉。
var $ = require("./js/lib/jquery");
在大部分的壓縮中，因?yàn)檫@句代碼絕對(duì)不會(huì)被執(zhí)行，因此被當(dāng)成了廢代碼直接去除掉了。
優(yōu)點(diǎn)是一個(gè)硬開關(guān)。如果是用js本身維護(hù)一個(gè)配置對(duì)象也可以達(dá)成這樣的效果，但代碼依然會(huì)跑到線上。使用本方法能強(qiáng)制的把代碼濾掉，完全的避免資源浪費(fèi)。
代碼會(huì)更加有條理，功能相關(guān)的部分會(huì)有規(guī)律的聚集到一起。
代碼上線可以更靈活，不必因?yàn)榇a沒有完全實(shí)現(xiàn)而推遲上線，沒有完成的功能關(guān)閉即可。
靈活下線。線上如果有BUG，立馬關(guān)閉功能。我感覺這種方法比代碼版本回滾要好得多，因?yàn)锽UG可能不是上個(gè)版本產(chǎn)生的。
缺點(diǎn)環(huán)境須用webpack，當(dāng)然其他的工具可能也可以做到。
工程復(fù)雜度增加，成員要嚴(yán)格的做flag條件設(shè)置。
擴(kuò)展可以做一個(gè)功能清單，這樣就有了實(shí)際的意義了。
new webpack.DefinePlugin({
__DEBUG__ : true,
__F_EDITOR__ : true,
__F_TREE_LIST__: false,
__F_SIGN_UP__ : true
})
這樣就能像做開關(guān)一樣自由的開啟功能點(diǎn)。如果設(shè)置的功能點(diǎn)過多，那么最好用多帶帶的一個(gè)文件保存。
結(jié)語真實(shí)情況中會(huì)相當(dāng)?shù)膹?fù)雜，如何定義還請自行根據(jù)經(jīng)驗(yàn)判斷。如有疑問和糾正可以留言。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85543.html
摘要：不是一個(gè)新名詞，早在年已經(jīng)提出這個(gè)思想，但是直到的發(fā)布，終于可以在中添加到主屏，只有安卓和都能使用的基本功能，它才算是真的開始走近大眾。 原文鏈接：https://ssshooter.com/2018-09... PWA（Progressive Web Apps）雖然是網(wǎng)頁應(yīng)用，但是可以帶來媲美原生的用戶體驗(yàn)，其中包含離線可用，后臺(tái)推送等功能。PWA 不是一個(gè)新名詞，早在 2015 年...
摘要：不用我贅述，前端開發(fā)人員一定耳熟能詳。命令會(huì)用這個(gè)配置，生成的結(jié)果都會(huì)給文件名加，文件也會(huì)壓縮?？捎霉ぞ呓榻B啟動(dòng)調(diào)試服務(wù)器，使用作為配置，不直接生成物理文件，直接內(nèi)存級(jí)別響應(yīng)調(diào)試服務(wù)器資源請求。 AngularJS不用我贅述，前端開發(fā)人員一定耳熟能詳。有人稱之為MVWhatever框架，意思是使用AngularJS，你可以參考任意范式進(jìn)行應(yīng)用開發(fā)，無論是MVC、還是MVVVM都信手拈來...
摘要：關(guān)于標(biāo)題，為什么是愛與恨因?yàn)樵趧偝鰜淼臅r(shí)候，我并不是堅(jiān)定的支持者，有很多地方用起來不方便，設(shè)計(jì)不合理。用戶只有首次訪問需要下載全部靜態(tài)資源，以后的訪問都直接使用緩存資源。首先，在中添加字段，當(dāng)為時(shí)，則開啟服務(wù)。例如請求的是則返回中的數(shù)據(jù)。 關(guān)于標(biāo)題，為什么是愛與恨？ 因?yàn)樵?webpack 剛出來的時(shí)候，我并不是堅(jiān)定的支持者，有很多地方用起來不方便，api 設(shè)計(jì)不合理。隨著 webpa...
摘要：基于的大型單頁應(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ā)、...
閱讀 3623·2023-04-25 14:57
閱讀 2626·2021-11-22 14:56
閱讀 2196·2021-09-29 09:45
閱讀 1836·2021-09-22 15:53
閱讀 3393·2021-08-25 09:41
閱讀 966·2019-08-29 15:22
閱讀 3360·2019-08-29 13:22
閱讀 3192·2019-08-29 13:08
