create-react-app配置多环境打包

1、eject导出webpack配置

npm run eject

2、安装包

npm install -D dotenv-cli react-app-rewired

3、在根目录创建 config-overrides.js 定义配置

module.exports = function override(config, env) {
  return config;
}

4、在根目录创建.env.development、.env.production文件

// .env.development
REACT_APP_ENV=development
// .env.production
REACT_APP_ENV=production

5、修改 package.json 中的 scripts

"scripts": {
    "start": "react-app-rewired start",
    "build:dev": "dotenv -e .env.development react-app-rewired build",
    "build:pro": "dotenv -e .env.production react-app-rewired build",
},

6、输出 process.env

// html中：
%REACT_APP_ENV%
// js/jsx中：
console.log(process.env)

7、运行测试

// 开发环境
npm start
// 打包测试环境
npm run build:dev
// 打包生产环境
npm run build:pro

注：
1.必须以 REACT_APP_ 开头创建自定义环境变量，除了 NODE_ENV 之外的任何其他变量都将被忽略。
2.重载后可能会出现缺少react-scripts插件，安装即可npm install --save react-scripts。