创建项目

npx create-react-app my-app

因为默认是用yarn安装，所以建议后面也用yarn安装依赖

打包成相对路径配置

在package.json中增加：

"homepage": "."

eslint配置成airbnb风格

1. 安装eslint-config-airbnb:

yarn add eslint-config-airbnb -D

2. 项目下增加.eslintrc.json文件：
   其实直接在package.json中把eslintConfig下extends改成airbnb也可以，但是考虑到后面可能要自定义一些配置项，以及会增加ts和tsx配置，还是加文件较好：
   .eslintrc.json：

{
  "extends": [
    "react-app",
    "airbnb"
  ],
  "rules": {
    "react/jsx-filename-extension": 0
  }
}

注意：需要安装VSCode的ESLint插件，才会在写代码时候校验提示

api的baseUrl配置

1. 项目下增加.env.development文件：

REACT_APP_API_URL=http://10.234.216.150:7300

2. 项目下增加.env.production文件：

REACT_APP_API_URL=http://abcefg.com

3. js中代码中引用：

const baseUrl = process.env.REACT_APP_API_URL;

这样，开发环境的baseUrl就是“http://10.234.216.150:7300”，生产环境的就是“http://abcefg.com”。

注意：环境变量都必须以REACT_APP_为前缀，否则会被忽略。

注意：如果想在开发环境自定义api变量，建议不要直接修改.env.development文件，这个文件是给团队开发用的，请新增.env.development.local文件进行配置私用，这个文件也会自动被git忽略（CRA设置的），不用提交。其他一些配置文件还有好多，我觉得暂时用不到的。

增加 staging 环境配置：

有时候，光开发环境和生产环境配置还不够，因为还有测试环境。就需要加一个staging配置，这个稍微有些复杂。

1. 安装env-cmd包

yarn add env-cmd

2. 项目下增加.env.staging文件

REACT_APP_API_URL=http://staging.abcdefg.com

3. 其实这时候在package.json中scripts下增加"build:staging"即可

{
  scripts: {
    "build:staging": "env-cmd .env.staging npm run build",
  }
}

但是这样打出来的包也是在build文件夹下面。
如果想打包到另外一个文件夹下面，继续看下面

4. 项目下新建buildStaging.js文件：

const fs = require('fs-extra');
const childProcess = require('child_process');

const buildFolderExist = fs.existsSync('./build');
const buildStagingFolderExist = fs.existsSync('./buildstaging');
// 备份build文件夹
if (buildFolderExist) {
  fs.renameSync('./build', './build-tttttemp');
}
// build staging环境
if (buildStagingFolderExist) fs.removeSync('./buildstaging');
childProcess.execSync('env-cmd .env.staging npm run build');
fs.renameSync('./build', './buildstaging');
// 还原build文件夹
if (buildFolderExist) {
  fs.renameSync('./build-tttttemp', './build');
}

5. package.json中scripts下改写"build:staging"：

"build:staging": "node buildStaging.js",

这样运行yarn run build:staging时候就会自动打包测试环境到buildstaging文件夹下

6. 最终scripts样子：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "build:staging": "node buildStaging.js",
    "build:all": "npm run build:staging && npm run build"
  },

其中build:all是同时打包生产环境和测试环境