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(({command, 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:vite-build --mode {1} \" && build:script --"
       }
    }

执行的脚本：

// 调整前 需要自己补充script中不同环境的构建命令
pnpm|yarn|npm run build:test

// 调整前 根据构建场景，从命令行进行参数注入（ps:构建环境相对复杂的项目，简易[一定]补充README.md）
pnpm|yarn|npm run build test(构建的环境)

参考资料

• Vite

• vite-plugin-environment

• npm-run-all