使用env-cmd为React设置build环境变量

通常一个项目会有多个版本，如开发版、测试版、生产版。 在React中，使用yarn start启动的默认是开发版，build后默认是生成版。

如下，是React的ProcessEnv类型：

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

那么，如果想build测试版和生产版怎么办呢？

这里需要用到env-cmd。首先安装env-cmd：

yarn add env-cmd

然后在项目根目录下建立3个文件，分别是：

.env.dev

REACT_APP_TYPE = 'dev'

.env.test

REACT_APP_TYPE = 'dev'

.env.pro

REACT_APP_TYPE = 'dev'

相应地，在App.tsx中：

<div>{process.env.REACT_APP_TYPE}<div>

这样，就可以根据不同的环境显示不同的值。

package.json中，执行脚本为：

"start": "env-cmd -f .env.dev react-scripts start",
"build:test": "env-cmd -f .env.test react-scripts build",
"build:pro": "env-cmd -f .env.pro react-scripts build",

最后，需要注意的是，如果变量名不是以REACT_APP_XXX形式的，就无效。前缀REACT_APP_是必须的。