为不同环境构建React应用：扩展NODE_ENV与构建命令配置

一、TypeScript类型扩展的配置问题 #

你在根目录创建的index.d.ts不用额外配置，但要注意TypeScript的识别范围：

• 默认tsconfig.json的include一般只包含src目录，所以根目录的index.d.ts可能不会被读取。要么把这个文件移到src文件夹下，要么修改tsconfig.json的include字段：

  {
    "include": [
      "src",
      "./index.d.ts"
    ]
  }
  

这样就能覆盖默认的NodeJS.ProcessEnv类型，消除staging的类型错误。

二、通过构建命令让环境判断逻辑生效 #

直接加--staging参数没用，得通过环境变量工具或者直接设置NODE_ENV：

1. 用cross-env跨平台设置NODE_ENV #

先安装依赖：

npm install cross-env --save-dev

然后修改package.json的scripts：

{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development react-scripts build",
    "build:staging": "cross-env NODE_ENV=staging react-scripts build",
    "build:prod": "cross-env NODE_ENV=production react-scripts build"
  }
}

之后执行对应命令即可：

• 开发环境构建：npm run build:dev
• 预发布环境构建：npm run build:staging
• 生产环境构建：npm run build:prod

2. 注意事项 #

create-react-app内部只对development/production/test三个NODE_ENV值做特殊处理，比如production会开启代码压缩等优化。如果想让staging也用上production级别的优化，可以在命令里加额外参数，比如：

"build:staging": "cross-env NODE_ENV=staging GENERATE_SOURCEMAP=false react-scripts build"

三、更省心的多环境方案：用.env文件 #

比起手动判断NODE_ENV，更推荐用create-react-app自带的环境变量文件机制：

1. 在根目录创建三个环境文件：
   • .env.development

     REACT_APP_API_URL=你的开发环境地址
     

   • .env.staging

     REACT_APP_API_URL=你的预发布环境地址
     

   • .env.production

     REACT_APP_API_URL=你的生产环境地址
     

2. 还是用cross-env配置scripts，让NODE_ENV自动对应加载.env文件：

   {
     "scripts": {
       "start:dev": "cross-env NODE_ENV=development react-scripts start",
       "start:staging": "cross-env NODE_ENV=staging react-scripts start",
       "build:dev": "cross-env NODE_ENV=development react-scripts build",
       "build:staging": "cross-env NODE_ENV=staging react-scripts build",
       "build:prod": "cross-env NODE_ENV=production react-scripts build"
     }
   }
   

3. 代码里直接用变量即可，不用写一堆if-else：

   const url = process.env.REACT_APP_API_URL || DEV_URL;
   

类型提示的话，在index.d.ts里扩展下：

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'staging';
    REACT_APP_API_URL: string;
  }
}

四、其他细节 #

• 自定义环境变量必须以REACT_APP_开头，create-react-app才会把它注入到应用里。
• 要是不想用cross-env，Linux/macOS下可以直接写NODE_ENV=staging react-scripts build，但Windows得用set NODE_ENV=staging && react-scripts build，cross-env就是帮你统一跨平台命令的。

内容的提问来源于stack exchange，提问作者Sachihiro