工程配置文件

UmiJS工程的配置可以在.umirc.ts或config/config.ts这两个位置编写，这两个配置文件仅仅是路径和文件名不同其余都是相同的，不过我们一般不会同时使用，后续章节都以config/config.ts作为配置文件进行介绍。这篇笔记我们介绍一些常用的工程配置文件用法以及最佳实践。

配置格式

UmiJS创建工程后，默认生成的配置如下。

import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: 'npm',
});

其中，我们使用了defineConfig()函数包裹内置信息，是仅仅是为了让IDE对配置能够更好的联想支持，这里直接export default {}也是可以的。

多环境配置

UmiJS支持UMI_ENV环境变量，当指定这个环境变量时，会在config.ts的基础上额外加载对应环境的配置文件config.${UMI_ENV}.ts，设置这个环境变量可以结合cross-env实现。执行以下命令安装cross-env。

npm install --save-dev cross-env

假设我们的环境名分别叫development、testing、production分别对应开发环境、测试环境和生产环境，我们这里创建以下配置文件。

config
|_config.ts
|_config.development.ts
|_config.testing.ts
|_config.production.ts

同时package.json的scripts字段如下配置。

{
    "build": "cross-env UMI_ENV=development umi build",
    "build:test": "cross-env UMI_ENV=testing umi build",
    "build:prod": "cross-env UMI_ENV=production umi build",
    // ...
}

此时我们执行对应的打包命令，UmiJS便会自动选择相应环境配置文件和config.ts进行深度合并，合并的顺序是环境配置优先级高于config.ts，最终得到对应环境的结果配置。

避坑：环境名（即UMI_ENV）避免使用dev、test和prod，不知道是不是Umi4一些约定上的特殊设计还是bug，config.dev.ts固定在umi dev时生效，config.prod.ts固定在umi build时生效，使用cross-env手动指定是无效的，不建议依赖这种隐式的配置行为。

代码中读取自定义配置

UmiJS的配置中支持define字段，我们可以直接通过它向NodeJS的环境对象process.env赋值，代码中引用时会在编译阶段进行替换。

export default {
    define: {
        'process.env.serviceUrl': 'http://localhost:8080/'
    }
};

<div>{process.env.serviceUrl}</div>

我们在配置文件中使用define增加了一个自定义配置，实际代码中使用process.env即可获取。

作者：Gacfox