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

Jackwoo 發(fā)布于2019-08-23 11:34 / 2505人閱讀

摘要：開發(fā)環(huán)境和生產(chǎn)環(huán)境分離的原因在開發(fā)時，會產(chǎn)生或者是測試的代碼，這些代碼不應該出現(xiàn)在生產(chǎn)環(huán)境中。當項目部署時，往往會將代碼進行一系列的壓縮來優(yōu)化它，如此會徹底破壞代碼的可讀性。方案二使用這個參數(shù)來辨別開發(fā)環(huán)境。

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

在開發(fā)時，會產(chǎn)生 debug 或者是測試的代碼，這些代碼不應該出現(xiàn)在生產(chǎn)環(huán)境中。當項目部署時，往往會將代碼進行一系列的壓縮來優(yōu)化它，如此會徹底破壞代碼的可讀性。本地開發(fā)往往使用的是本地 mock 的數(shù)據(jù)，而正是上線后用的是真實數(shù)據(jù)。以上幾點，開發(fā)環(huán)境和生產(chǎn)環(huán)境必須得分離。

比如我想讓項目根據(jù)不同的環(huán)境登錄不同的地址。本地開發(fā)登錄的是localhost，測試環(huán)境登錄的是test地址，上線環(huán)境登錄的是online地址。那么業(yè)務代碼里如何判斷生產(chǎn)開發(fā)測試環(huán)境呢？

方案一將環(huán)境變量配置到 package.json

// package.json
{
// npm install cross-env
// 因為mac和windows設置命令環(huán)境變量的命令不一致, 所以用cross-env來做兼容
  "script": {
    "dev": "cross-env NODE_ENV=dev webpack --progress --colors",
    "production": "cross-env NODE_ENV=production webpack --progress --colors"
  }
}
// npm run dev // 開發(fā)
// npm run production // 生產(chǎn)

那么 package.json 的 script中的參數(shù), webpack文件中如何讀取呢？
在 webpack 中, 可通過 process.env.NODE_ENV獲取到變量

// webpack 下
plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  })
]

為什么需要加上JSON.stringify, 因為webpack 打包的時候?qū)ψ兞孔鎏鎿Q會將 process.env.NODE_ENV 替換成 production, 而我們期望的是 "production"

有個問題，new webpack.DefinePlugin 定義的全局變量是 在編譯時可以配置的全局常量。,那么，如何在 webpack config 文件中使用 process.env.NODE_ENV 呢?
就是上面的回答，在腳本中設置變量并且用上cross-env。因此經(jīng)常兩者結(jié)合使用。

方案二：

使用process.env.npm_lifecycle_event 這個參數(shù)來辨別開發(fā)環(huán)境。
npm 提供一個 npm_lifecycle_event 變量，返回當前正在運行的腳本名稱
這個方法極為簡單。

npm scripts 使用指南

webpack.DefinePlugin使用介紹

GPU云服務器云服務器如何php開發(fā)環(huán)境如何搭建java開發(fā)環(huán)境生產(chǎn)環(huán)境測試環(huán)境測試環(huán)境生產(chǎn)環(huán)境

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

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

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

摘要：開發(fā)環(huán)境和生產(chǎn)環(huán)境都擁有的配置，但在細節(jié)上有所不同，比如說，又比如說中的和參數(shù)。更重要的是，實際上開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置文件的絕大部分都是一致的，對于這一致的部分來說，我們堅決要消除冗余，否則后續(xù)維護起來不僅麻煩，而且還容易出錯。本文首發(fā)于Array_Huang的技術博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/11900...

paulquei 2019-08-20 11:09 評論0 收藏0
工行數(shù)據(jù)中心高級經(jīng)理李雁南：接口冒煙測試方法

摘要：接口測試主要用于檢測外部系統(tǒng)與系統(tǒng)之間以及內(nèi)部各個子系統(tǒng)之間的交互點。隨著案例和執(zhí)行結(jié)果的不斷積累，接口測試覆蓋會更加充分，統(tǒng)計結(jié)果會更加精確。原文出自【聽云技術博客】：http://blog.tingyun.com/web/a... 今年遇到了幾個問題，與接口的功能和性能相關，恰巧最近公司也在組織以冒煙測試為主題的活動，于是乎突發(fā)奇想，尋思著能否將接口測試與冒煙測試結(jié)合起來，發(fā)掘一...

sunny5541 2019-07-31 10:53 評論0 收藏0
JavaScript 需要檢查變量類型嗎

摘要：一返回值調(diào)用外部方法獲取的值需要對類型做判斷，因為我們對方法返回的值是有期望值類型，但是卻不能保證這個接口返回的值一直是同一個類型。 19年目標：消滅英語！我新開了一個公眾號記錄一個程序員學英語的歷程有提升英語訴求的小伙伴可以關注公眾號：csenglish 程序員學英語，每天花10分鐘交作業(yè)，跟我一起學英語吧 javascript作為一門動態(tài)類型語言，具有很高的動態(tài)靈活性，當定義函數(shù)...

Songlcy 2019-08-20 15:47 評論0 收藏0
馬蜂窩大交通業(yè)務質(zhì)量體系建設初步實踐

摘要：大交通研發(fā)質(zhì)量體系建設為了幫助用戶更好地完成消費決策閉環(huán)，馬蜂窩上線了大交通業(yè)務，為用戶提供購買機票火車票等服務。質(zhì)量是決定產(chǎn)品能否成功、企業(yè)能否持續(xù)發(fā)展的關鍵因素之一。如何做好質(zhì)量體系建設，這是個比較大的話題，包含的范圍很廣，也沒有固定的衡量標準。打開一個互聯(lián)網(wǎng)公司招聘網(wǎng)站，搜索「測試工程師」崗位時，你會發(fā)現(xiàn)幾乎全部 JD 都包含一條要求「建設或者參與建設所負責業(yè)務的質(zhì)量體系」。...

Ilikewhite 2019-07-01 13:59 評論0 收藏0
馬蜂窩大交通業(yè)務質(zhì)量體系建設初步實踐

摘要：大交通研發(fā)質(zhì)量體系建設為了幫助用戶更好地完成消費決策閉環(huán)，馬蜂窩上線了大交通業(yè)務，為用戶提供購買機票火車票等服務。質(zhì)量是決定產(chǎn)品能否成功、企業(yè)能否持續(xù)發(fā)展的關鍵因素之一。如何做好質(zhì)量體系建設，這是個比較大的話題，包含的范圍很廣，也沒有固定的衡量標準。打開一個互聯(lián)網(wǎng)公司招聘網(wǎng)站，搜索「測試工程師」崗位時，你會發(fā)現(xiàn)幾乎全部 JD 都包含一條要求「建設或者參與建設所負責業(yè)務的質(zhì)量體系」。...

fantix 2019-08-23 18:07 評論0 收藏0