Web前端工程化開發中，這樣配置多環境，既靈活又優雅

作者：前端梁哥 2023-04-12 07:55:24

我比較推薦在項目根目錄創建一個.env-cmdrc.js文件，因為這么做就不需要指定配置文件路徑了，env-cmd默認查找的就是根目錄的這個文件。擴展名也可以是json，但我推薦用js，為什么呢？因為js更加靈活。

在Web前端工程化開發中，我們通常需要多個環境，至少需要開發和生產環境，也可能還需要不同的測試環境。那么，我是怎樣配置多環境的呢？

通常，一些腳手架都有配置多環境的解決方案，比如在項目根目錄創建多個.env文件。但我不喜歡在根目錄創建很多.env文件，我覺得這樣不夠優雅，也不夠靈活，并沒有采用這種方案，而是使用了其它的解決方案。

我使用了一個第三方包，叫：env-cmd，它的用法非常簡單。我們需要創建一個環境變量配置文件，擴展名可以是json或者js，文件名可以隨便起，可以放到任何目錄，使用時指定配置文件路徑即可。

首先，提醒大家一點，自定義的環境變量，命名一定要遵守腳手架的命名約定，比如：vue-cli要求必須以VUE_APP_開頭。

如下代碼是env-cmd的配置文件長相，導出的對象屬性名就是env-cmd 環境名字，這是用js的方式。如果用json，就不需要導出了。

// .env-cmdrc.js
module.exports = {
  development: {
    API_BASE: '/api'
  },
  production: {
    API_BASE: '/'
  },
  test: {
    API_BASE: '/'
  }
}

以下代碼是我們其中一個項目的配置，大家看到js作為配置文件的優勢了吧？

// .env-cmdrc.js
const envList = [
  {
    MODE: 'development',
    API_BASE: '/api',
    FILE_BASE: '/files'
  },
  {
    MODE: 'production',
    API_BASE: '/'
  }
]

module.exports = envList.reduce((t, _) => {
  return {
    ...t,
    [_.MODE]: {
      ..._,
      APP_NAME: _.APP_NAME || 'XXXX管理后臺'
    }
  }
}, {})

那么，有了配置文件，我們該如何使用呢？只需在package.json中的開發和構建腳本之前增加env-cmd -e命令，用于指定環境，以下就是使用方法。

"scripts": {
    "dev": "env-cmd -e development vite",
    "dist": "vite build",
    "build": "env-cmd -e production npm run dist"
  }

如果你用的vite，或者其它無法自動注入環境變量的腳手架，就需要你手動將環境變量注入應用了，如下是vite的注入例子。大家能理解吧？

import { defineConfig } from 'vite'

export default defineConfig({
  define: [
    'MODE',
    'API_BASE',
    'APP_NAME',
    'FILE_BASE'
  ].reduce((t, k) => ({ ...t, [`process.env.${k}`]: JSON.stringify(process.env[k]) }), {}),
})

下面是在我們的應用中使用的例子。

/** @type {string} 多環境配置中的環境名 */
export const ENV_NAME = process.env.MODE

/** @type {string} 接口baseUrl */
export const API_BASE = process.env.API_BASE

/** @type {string} 文件baseUrl */
export const FILE_BASE = process.env.FILE_BASE

/** @type {string} 應用名稱 */
export const APP_NAME = process.env.APP_NAME

感謝閱讀！是不是很簡單？

責任編輯：姜華來源：今日頭條

Web 前端工程化