Appearance
Vite多环境构建命令简化
背景
实际项目需要构建的环境不仅仅有测试环境和生产环境，可能包含更多的环境：Demo环境,Verify环境，预发布环境等。正常操作就是在package.json中新增构建命令。
比如新增Demo环境构建命令：
{
"script": {
"build:script 额外的操作脚本",
"build": "cross-env NODE_ENV=production vite build && npm run build:script",
"build:test": "cross-env NODE_ENV=test vite build --mode test && && npm run build:script",
"build:demo": "cross-env NODE_ENV=demo vite build --mode demo && && npm run build:script",
...
}
}
当环境超过一定的数量时候，package.json中的"script"会变得相当冗长和复杂。
解决方案
针对上面情景，我们需要优化package.json->script中的规则。
- 优化
script的环境变量：cross-env的NODE_ENV和vite build的mode是否公用。 - 多个脚本执行优化：通过npm-run-all进行优化。
script环境变量提取
在Vite构建中通过mode替换cross-env的NODE_ENV的环境变量。
"build:test": "npm run update-pack && vite build --mode test && npm run build:script"
在vite.config.js中，读取相关参数信息并且注入指定的环境变量，目前通过vite-plugin-environment插件处理。
export default defineConfig(({commang, mode}){
reutrn {
plugins: [
EnvironmentPlugin({
NODE_ENV: mode
}),
],
}
})
npm-run-all简化执行脚本
{
"script": {
"build:update-pack": "pnpm install || yarn install || npm install",
"build:test": "npm run update-pack && vite build --mode test && npm run build:script"
}
}
// 简化后
{
"script": {
...
"build:update-pack": "pnpm install || yarn install || npm install",
"build:test": "npm-run-all update-pack && vite build --mode test && build:script"
}
}
进一步进化和拆分script,从命令行参数注入。
{
"script": {
...
"build:update-pack": "pnpm install || yarn install || npm install",
"build:vite-build": "vite build",
"build": "npm-run-all update-pack && \"build:vitebuild --mode {1} \" && build:script --"
}
}
执行的脚本：
// 调整前 需要自己补充script中不同环境的构建命令
pnpm|yarn|npm run build:test
// 调整前 根据构建场景，从命令行进行参数注入（ps:构建环境相对复杂的项目，简易[一定]补充README.md）
pnpm|yarn|npm run build test(构建的环境)