webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？

paulquei 發(fā)布于2019-08-20 11:09 / 1668人閱讀

摘要：開發(fā)環(huán)境和生產(chǎn)環(huán)境都擁有的配置，但在細(xì)節(jié)上有所不同，比如說，又比如說中的和參數(shù)。更重要的是，實(shí)際上開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置文件的絕大部分都是一致的，對于這一致的部分來說，我們堅(jiān)決要消除冗余，否則后續(xù)維護(hù)起來不僅麻煩，而且還容易出錯(cuò)。

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006952432
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

前言

開發(fā)環(huán)境與生產(chǎn)環(huán)境分離的原因如下：

在開發(fā)時(shí)，不可避免會產(chǎn)生大量debug又或是測試的代碼，這些代碼不應(yīng)出現(xiàn)在生產(chǎn)環(huán)境中（也即不應(yīng)提供給用戶）。

在把頁面部署到服務(wù)器時(shí)，為了追求極致的技術(shù)指標(biāo)，我們會對代碼進(jìn)行各種各樣的優(yōu)化，比如說混淆、壓縮，這些手段往往會徹底破壞代碼本身的可讀性，不利于我們進(jìn)行debug等工作。

數(shù)據(jù)源的差異化，比如說在本地開發(fā)時(shí)，讀取的往往是本地mock出來的數(shù)據(jù)，而正式上線后讀取的自然是API提供的數(shù)據(jù)了。

如果硬是要在開發(fā)環(huán)境和生產(chǎn)環(huán)境用完全一樣的代碼，那么必然會付出沉重的代價(jià)，這點(diǎn)想必也不用多說了。

下面主要針對兩點(diǎn)來介紹如何分離開發(fā)環(huán)境和生產(chǎn)環(huán)境：一是如何以不同的方式進(jìn)行編譯，也即如何分別形成開發(fā)環(huán)境及生產(chǎn)環(huán)境的webpack配置文件；二是在業(yè)務(wù)代碼中如何根據(jù)環(huán)境的不同而做出不同的處理。

如何分離開發(fā)環(huán)境和生產(chǎn)環(huán)境的webpack配置文件

如果同時(shí)把一份完整的開發(fā)環(huán)境配置文件和一份完整的生產(chǎn)環(huán)境配置文件列在一起進(jìn)行比較，那么會出現(xiàn)以下三種情況：

開發(fā)環(huán)境有的配置，生產(chǎn)環(huán)境不一定有，比如說開發(fā)時(shí)需要生成sourcemap來幫助debug，又或是熱更新時(shí)使用到的HotModuleReplacementPlugin。

生產(chǎn)環(huán)境有的配置，開發(fā)環(huán)境不一定有，比如說用來混淆壓縮js用的UglifyJsPlugin。

開發(fā)環(huán)境和生產(chǎn)環(huán)境都擁有的配置，但在細(xì)節(jié)上有所不同，比如說output.publicPath，又比如說css-loader中的minimize和autoprefixer參數(shù)。

更重要的是，實(shí)際上開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置文件的絕大部分都是一致的，對于這一致的部分來說，我們堅(jiān)決要消除冗余，否則后續(xù)維護(hù)起來不僅麻煩，而且還容易出錯(cuò)。

怎么做呢？

答案很簡單：分拆webpack配置文件成N個(gè)小module。原先我們是一個(gè)完整的配置文件，有好幾百行，從頭看到尾都頭大了，更別說分離不分離的了。下面來看看我分離的結(jié)果：

├─webpack.dev.config.js # 開發(fā)環(huán)境的webpack配置文件（無實(shí)質(zhì)內(nèi)容，僅為組織整理）
├─webpack.config.js # 生產(chǎn)環(huán)境的webpack配置文件（無實(shí)質(zhì)內(nèi)容，僅為組織整理）
├─webpack-config # 存放分拆后的webpack配置文件
  ├─entry.config.js # webpack配置中的各個(gè)大項(xiàng)，這一級目錄里的文件都是
  ├─module.config.js
  ├─output.config.js
  ├─plugins.dev.config.js # 倆環(huán)境配置中不一致的部分，此文件由開發(fā)環(huán)境配置文件webpack.dev.config.js來加載
  ├─plugins.product.config.js # 倆環(huán)境配置中不一致的部分，此文件由生產(chǎn)環(huán)境配置文件webpack.config.js來加載
  ├─resolve.config.js
  │  
  ├─base # 主要是存放一些變量
  │   ├─dir-vars.config.js
  │   ├─page-entries.config.js
  │      
  ├─inherit # 存放生產(chǎn)環(huán)境和開發(fā)環(huán)境相同的部分，以供繼承
  │   ├─plugins.config.js
  │      
  └─vendor # 存放webpack兼容第三方庫所需的配置文件
      ├─eslint.config.js
      ├─postcss.config.js

文件目錄結(jié)構(gòu)看過了，接下來看一下我是如何組織整理最后的配置文件的：

/* 開發(fā)環(huán)境webpack配置文件webpack.dev.config.js */
module.exports = {
  entry: require("./webpack-config/entry.config.js"),

  output: require("./webpack-config/output.config.js"),

  module: require("./webpack-config/module.config.js"),

  resolve: require("./webpack-config/resolve.config.js"),

  plugins: require("./webpack-config/plugins.dev.config.js"),

  eslint: require("./webpack-config/vendor/eslint.config.js"),

  postcss: require("./webpack-config/vendor/postcss.config.js"),
};

這樣，你就可以很輕松地處理開發(fā)/生產(chǎn)環(huán)境配置文件中相同與不同的部分了。

如何分別調(diào)用開發(fā)/生產(chǎn)環(huán)境的配置文件呢？

還記得我在《webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？》里講過，我們在控制臺調(diào)用webpack命令來啟動(dòng)打包時(shí)，可以添加上--config參數(shù)來指定webpack配置文件的路徑嗎？我們可以配合上npm scripts來使用，在package.json里定義：

  "scripts": {
    "build": "node build-script.js && webpack --progress --colors",
    "dev": "node build-script.js && webpack --progress --colors --config ./webpack.dev.config.js",
    "watch": "webpack --progress --colors --watch --config ./webpack.dev.config.js"
  },

這樣一來，當(dāng)我們開發(fā)的時(shí)候就可以使用npm run dev或npm run watch，而到要上線打包的時(shí)候就運(yùn)行npm run build。

業(yè)務(wù)代碼如何判斷生產(chǎn)/開發(fā)環(huán)境

在業(yè)務(wù)代碼里要判斷生產(chǎn)/開發(fā)環(huán)境其實(shí)很簡單，只需一個(gè)變量即可：

if (IS_PRODUCTION) {
    // 做生產(chǎn)環(huán)境該做的事情
} else {
    // 做開發(fā)環(huán)境該做的事情
}

這么一來，關(guān)鍵就在于這變量IS_PRODUCTION是怎么來的了。

在我還沒分離開發(fā)和生產(chǎn)環(huán)境時(shí)，我用的辦法是，開發(fā)時(shí)在業(yè)務(wù)代碼所使用的配置文件中把這變量設(shè)為false，而在最后打包上線時(shí)就手動(dòng)改為true。這種方法我用過一段時(shí)間，非常繁瑣，而且經(jīng)常上線后發(fā)現(xiàn)，我嘞個(gè)去怎么ajax讀的是我本地的mock服務(wù)器。

怎么做呢？

我參考了許多文章，先粗略講講我沒有采用的方法：

用EnvironmentPlugin引入process.env，這樣就可以在業(yè)務(wù)代碼中靠process.env.NODE_ENV來判斷了。

用ProvidePlugin來控制在不同環(huán)境里加載不同的配置文件（業(yè)務(wù)代碼用的）。

那我用的是什么方法呢？我最后選用的是DefinePlugin。

舉個(gè)官方例子，其大概用法是這樣的：

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

DefinePlugin可能會被誤認(rèn)為其作用是在webpack配置文件中為編譯后的代碼上下文環(huán)境設(shè)置全局變量，但其實(shí)不然。它真正的機(jī)制是：DefinePlugin的參數(shù)是一個(gè)object，那么其中會有一些key-value對。在webpack編譯的時(shí)候，會把業(yè)務(wù)代碼中沒有定義（使用var/const/let來預(yù)定義的）而變量名又與key相同的變量（直接讀代碼的話的確像是全局變量）替換成value。例如上面的官方例子，PRODUCTION就會被替換為true；VERSION就會被替換為"5fa3b9"（注意單引號）；BROWSER_SUPPORTS_HTML5也是會被替換為true；TWO會被替換為1+1（相當(dāng)于是一個(gè)數(shù)學(xué)表達(dá)式）；typeof window就被替換為"object"了。

再舉個(gè)例子，比如你在代碼里是這么寫的：

if (!PRODUCTION)
    console.log("Debug info")
if (PRODUCTION)
    console.log("Production log")

那么在編譯生成的代碼里就會是這樣了：

if (!true)
    console.log("Debug info")
if (true)
    console.log("Production log")

而如果你用了UglifyJsPlugin，則會變成這樣：

console.log("Production log")

如此一來，只要在倆環(huán)境的配置文件里用DefinePlugin分別定義好IS_PRODUCTION的值，我們就可以在業(yè)務(wù)代碼里進(jìn)行判斷了：

  /* global IS_PRODUCTION:true */
  if (!IS_PRODUCTION) {
    console.log("如果你看到這個(gè)Log，那么這個(gè)版本實(shí)際上是開發(fā)用的版本");
  }

需要注意的是，如果你在webpack里整合了ESLint，那么，由于ESLint會檢測沒有定義的變量（ESLint要求使用全局變量時(shí)要用window.xxxxx的寫法），因此需要一個(gè)global注釋聲明（/* global IS_PRODUCTION:true */）IS_PRODUCTION是一個(gè)全局變量(當(dāng)然在本例中并不是)來規(guī)避warning。

示例代碼

諸位看本系列文章，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。

附系列文章目錄（同步更新）

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施

webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

webpack多頁應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006952432
如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

GPU云服務(wù)器云服務(wù)器生產(chǎn)環(huán)境測試環(huán)境測試環(huán)境生產(chǎn)環(huán)境測試環(huán)境與生產(chǎn)環(huán)境區(qū)別生產(chǎn)環(huán)境

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

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

發(fā)表評論

登陸后可評論

0條評論

paulquei

男|高級講師

我要關(guān)注我要私信

TA的文章

Skywalking IoTDB存儲插件設(shè)計(jì)說明

閱讀 2342·2021-09-30 09:47
2019年4月所遇知識點(diǎn)整理

閱讀 2963·2019-08-30 11:05
css實(shí)現(xiàn)單行、多行文本超出顯示省略號

閱讀 2536·2019-08-29 17:20
CSS入門指南-3：定位元素

閱讀 1923·2019-08-29 13:01
JavaScript聲明變量詳解

閱讀 1731·2019-08-26 13:39
SVG vs Image, SVG vs Iconfont

閱讀 1258·2019-08-26 13:26
fc-whiteboard，支持鏡像、錄播、回放的 Web 電子白板

閱讀 3214·2019-08-23 18:40
Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

閱讀 1833·2019-08-23 17:09

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？

相關(guān)文章

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)

webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？

webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？

webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯

發(fā)表評論

0條評論

paulquei

男|高級講師

TA的文章

Skywalking IoTDB存儲插件設(shè)計(jì)說明

2019年4月所遇知識點(diǎn)整理

css實(shí)現(xiàn)單行、多行文本超出顯示省略號

CSS入門指南-3：定位元素

JavaScript聲明變量詳解

SVG vs Image, SVG vs Iconfont

fc-whiteboard，支持鏡像、錄播、回放的 Web 電子白板

Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？