配置變數區分不同環境

happy137發表於2018-01-17
變數

我這裡只配置了開發環境和生產環境，若要配置其他的環境，舉一反三。。。

安裝cross-env

由於我們的電腦有Windows和Mac，為了統一命令，可以安裝cross-env包。

  • 安裝：npm install cross-env
  • 使用：
    • 不需要區分環境時，可以設定啟動命令為："start": "node build/dev-server.js"
    • 需要區分環境時，在命令中定義變數，windows使用set命令；mac使用export命令
    • 安裝了cross-env後，統一使用cross-env命令即可。
    • 示例："start": "cross-env NODE_TYPE=development node build/dev-server.js"

使用NODE_TYPE變數區分環境

這裡採用一個環境變數NODE_TYPE來區分不同的環境。我們知道process.env屬性返回包含當前shell的所有環境變數，因此將環境變數NODE_TYPE定義在process.env中。

// 開發環境
dev: {
    env: {
        NODE_TYPE: `"${process.env.NODE_TYPE}"`
    }
}
// 生產環境
build: {
    env: {
        NODE_TYPE: `"${process.env.NODE_TYPE}"`
    }
}
複製程式碼

為不同環境賦不同的NODE_TYPE

為NODE_TYPE變數賦不同的值即可區分生產環境還是開發環境。如下示例：

"scripts": {
    "start": "cross-env NODE_TYPE=development node build/dev-server.js",
    "build": "cross-env NODE_TYPE=production node build/build.js"
}
複製程式碼
  • 將開發環境定義為development，生產環境定義為production；
  • 這樣由於我們在開發環境啟動專案使用命令npm start，執行該命令後，NODE_TYPE會被賦值為development；
  • 在生產環境構建專案時使用命令npm run build，執行該命令後，NODE_TYPE會被賦值為production。

根據NODE_TYPE做不同操作

環境已經區分開，然後就可以根據不同環境做相關操作啦。 這裡舉一個關於系統登出地址的小例子。 由於開發環境和生產環境的登出地址不同，因此我需要判斷不同環境下使用不同的地址。

let getLogoutUrl = () => {
    let logoutUrl = ''
    switch (process.env.NODE_TYPE) {
        case 'development':
          logoutUrl = '開發環境登出地址'
          break
        case 'production':
          logoutUrl = '生產環境登出地址'
          break
    }
    return logoutUrl
}
const logout = getLogoutUrl()
export {logout}
複製程式碼

下面只需要在需要設定登出地址的檔案中引入該檔案就可以啦。

相關文章