umi@4 环境变量配置

在学习 umi.js 的过程中遇到了一些小问题，记录一下。完整内容参照：官方文档

• umi.js 版本为：^4.0.72

重要概念

1. umi 的配置文件有两个，一个是 .umirc，另一个是 config/config.ts 这两个功能是等价的，但 .unirc 的优先级更高。
2. .umirc 和 config/config.ts 都支持通过添加文件后缀，区分不同环境的功能，以 config/config.ts 举例，格式为 config/config.${UMI_ENV}.ts
3. UMI_ENV 是 umi 提供的环境变量，他有三个安全值 dev、prod、test，这三个值只能由 umi 自动修改才有效，我们手动 UMI_ENV 为这三个值中的任意一个，都不会生效，项目依然使用默认的 dev 环境
4. 为了实现手动设置 UMI_ENV 生效，可以设置除这三个值之外的 key，例如 UMI_ENV=development，对应的就是 config/config.development.ts 文件
5. umi 的环境变量有两种，这里称为编译时和运行时。App 只能读取运行时的环境变量，可以通过 define 将编译时的变量转换成运行时以供 App 使用

实例 1

声明提供给编译时的环境变量，也就是 node 变量，可以通过 process.env.[变量名] 访问，但没办法在页面上直接访问

# .env
WELCOME="Hello World"

将编译时的环境变量转发给运行时，以供 App 调用，下面是一种取巧的写法：

// config/config.ts
export default {
    define: {
        'process.env': process.env
    },
    // ...其他代码
}

实例 2

我们希望在不同的环境下，使用不同的 proxy 代理，可以这么做：

1. 修改 package.json 文件中的 script 命令

{
    //...省略代码
    "script": {
        "dev": "cross-env NODE_ENV=development UMI_ENV=development umi dev",
        "prod": "cross-env NODE_ENV=production UMI_ENV=production umi dev",
    }
}

2. 在 config 目录下新增两个文件: config.development.ts 和 config.production.ts，并分别写入下列代码：

// config.development.ts
import { defineConfig } from "umi";

export default defineConfig({
    proxy: {
        '/api': {
            'target': 'https://www.dev.mock.cn/',
            'changeOrigin': true,
            'pathRewrite': { '^/api' : '' },
        },
    }
});

// config.production.ts
import { defineConfig } from "umi";

export default defineConfig({
    proxy: {
        '/api': {
            'target': 'https://www.prod.mock.cn/',
            'changeOrigin': true,
            'pathRewrite': { '^/api' : '' },
        },
    }
});

当我们运行 pnpm run prod 时，控制台弹出信息中出现下列内容，就说明配置生效了

[HPM] Proxy created: /api  -> https://www.prod.mock.cn/
[HPM] Proxy rewrite rule created: "^/api" ~> ""