Web前端工程化开发中，端工多环这样配置多环境，程化既灵活又优雅

作者：前端梁哥 2023-04-12 07:55:24开发 前端 我比较推荐在项目根目录创建一个.env-cmdrc.js文件，中样因为这么做就不需要指定配置文件路径了，配置env-cmd默认查找的境既就是根目录的这个文件。扩展名也可以是灵活json，但我推荐用js，又优雅为什么呢？因为js更加灵活。端工多环

在Web前端工程化开发中，程化我们通常需要多个环境，中样至少需要开发和生产环境，配置也可能还需要不同的境既测试环境。那么，灵活我是又优雅怎样配置多环境的呢？

通常，一些脚手架都有配置多环境的端工多环解决方案，比如在项目根目录创建多个.env文件。但我不喜欢在根目录创建很多.env文件，我觉得这样不够优雅，也不够灵活，并没有采用这种方案，而是使用了其它的解决方案。

我使用了一个第三方包，叫：env-cmd，它的用法非常简单。我们需要创建一个环境变量配置文件，扩展名可以是json或者js，文件名可以随便起，可以放到任何目录，使用时指定配置文件路径即可。

我比较推荐在项目根目录创建一个.env-cmdrc.js文件，因为这么做就不需要指定配置文件路径了，env-cmd默认查找的就是根目录的这个文件。扩展名也可以是json，但我推荐用js，为什么呢？因为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前端工程化

(责任编辑：知识)