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

目录

        修改配置

多环境配置

package.json demo如下：

测试

使用

参考资料，感谢以下同学：

---

修改配置

1. 可以通过 npm run eject 命令将配置文件暴露出来，然后去修改里面的webpack配置

2. 安装 react-app-rewired 包后，在根目录创建 config-overrides.js 自定义配置，最后修改 package.json 中的 scripts（替换react-scripts为react-app-rewired）​​

多环境配置

1. 安装 dotenv-cli 包
2. 根据需求在根目录创建 .env 文件（注意：只能以 REACT_APP_ 开头），如创建 .env.development、.env.production，内容如下：

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

    

3. 继续修改 package.json 中的 scripts 指定环境

package.json demo如下：

"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",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "dotenv-cli": "^2.0.1",
    "react-app-rewired": "^2.1.3"
}

测试

运行开发环境（npm start）、打包测试环境（npm run build:dev）、打包生产环境（npm run build:pro），分别 打印 process.env 如下：

// 1. 开发环境（npm start）
{NODE_ENV: "development", PUBLIC_URL: "", REACT_APP_ENV: "development"}

// 2. 测试环境（npm run build:dev）
{NODE_ENV: "production", PUBLIC_URL: "", REACT_APP_ENV: "development"}

// 3. 生产环境（npm run build:pro）
{NODE_ENV: "production", PUBLIC_URL: "", REACT_APP_ENV: "production"}

使用

1. html中：%REACT_APP_ENV%
2. js/jsx中：可以在 process.env 中访问

参考资料，感谢以下同学：

1. https://www.jianshu.com/p/f9535acd0462
2. https://www.jianshu.com/p/b24154123852
3. https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/