在umi中实现一次性构建多环境部署

最近在工作中，听到同事抱怨在内部平台上构建项目很慢。初步分析，有两个原因：1、项目本身较大，导致构建时间长2、我们的构建部署流程是：一次构建qa和prod环境2个包，然后将构建产品部署在不同的环境，这无疑会导致更长的整体构建时间。前者不是本文的重点。本文只讨论第二点：如何一次搭建多环境部署。buildoncedeployanywhere这个问题在后端比较常见，但是对于前端来说，有几个问题1.环境变量process.env.XXX在build阶段会直接编译成当前值。例：process.env.RUNTIME编译后，在代码中已经固定为‘thisisqaruntime’，不能及时更改。如果想针对不同的环境改成不同的值，需要重新构建exportdefaultfunctionIndexPage(){return(

);}//在yarnbuild之后，这段代码变成functiono(){returnObject(r["jsx"])("div",{children:Object(r["jsxs"])("p",{children:["`","thisisqaruntime","`"]})})}解决这个问题，最简单的方法就是把所有的配置都写到一个config.json中，然后使用fetch在你的代码中引入。public/config.json{"dev":{"RUNTIME":"thisisdevruntime"},"qa":{"RUNTIME":"thisisqaruntime"},"prod":{"RUNTIME":"thisisprodruntime"}}在umiapp.tsx中引入（项目部署时会注入部署信息delopyEnv，用于判断项目在dev、qa、prod哪个环境）//app.tsxexport函数渲染(oldRender:any){fetch('./config.json').then((res)=>res.json()).then((config)=>{window.config=config[window?.APP_METADATA?.deployEnv||'dev'];oldRender()})}//pages/home/index.tsxexportdefaultfunctionIndexPage(){return();}到目前为止，我们可以看到我们可以使用window.config.RUNTIME而不是process.env.RUNTIME2。publicPath我们在本地运行时，publicpath一般是根目录地址。但是在线上环境中，cssjsimg等资源文件一般都托管在CDN上。即我们在qa环境中构建的资源文件会以类似//!umi版本：3.5.20