react-create-app + webpack 设置多个运行和打包地址 --- 不 enject 的情况下

安装 react-create-app

yarn global add react-create-app
#OR
npm install react-create-app -g

初始化项目

yarn create react-app my-app
cd my-app
yarn start

设置不同的地址变量

1. 与 @vue/cli 类似，在根目录创建 .env(默认), .env.test, .env.prod文件

# .env.test 其他文件相同
REACT_APP_BASE_URL = '测试'

2. 复杂启启动命令不常用，对应的打包只是把 npm start => npm run build

#  Windows (Powershell)
#  vscod 编辑器里默认也是 powershell
($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start)

# Windows (cmd.exe)
set "REACT_APP_SECRET_CODE=abcdef" && npm start

# Linux, macOS (Bash)
REACT_APP_SECRET_CODE=abcdef npm start

3. 更改 package.json 的 scripts 来通过不同指令实现

3.1 安装 react-app-rewired，customize-cra，并在根目录创建 config-overrides.js文件

备注： react-app-rewired，customize-cra 简单来讲就是用来覆盖或者替换 react-create-app 默认配置的， 而 config-overrides.js文件 是用来更改或者替换 react-app-rewired 默认配置的

yarn add react-app-rewired customize-cra

# config-overrides.js
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config
}

3.2 全局安装 dotenv-cli ， 使用说明：https://github.com/entropitor/dotenv-cli

yarn global add dotenv-cli

3.3 修改 package.json 的 scripts 部分
备注： "eject" 是不可逆的用来弹射出或者暴露出 webpack 配置的文件

  # **package.json** 的 **scripts** 
"scripts": {
    "start": "dotenv -e .env.test react-app-rewired start",
    "start--test": "dotenv -e .env.test react-app-rewired start",
    "start--dev": "dotenv -e .env.dev react-app-rewired start",
    "start--prod": "dotenv -e .env.prod react-app-rewired start",
    "build": "dotenv -e .env.prod react-app-rewired build",
    "build--test": "dotenv -e .env.test react-app-rewired build",
    "build--prod": "dotenv -e .env.prod react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

3.4 启动打包说明

# start
yarn start
yarn start--test
yarn start--dev
yarn start--prod

# build
yarn build
yarn build--test
yarn build--prod

4. 两种方式都需要设置 api的入口url 就能根据不同的环境变量的值来作为不同的后台请求地址了

// const BASE  = 'http://123.123.123:8080'
const BASE = 'process.env.REACT_APP_BASE_URL'