創(chuàng)建項(xiàng)目

npx create-react-app my-app

因?yàn)槟J(rèn)是用yarn安裝，所以建議后面也用yarn安裝依賴

打包成相對(duì)路徑配置

在package.json中增加：

"homepage": "."

eslint配置成airbnb風(fēng)格

1. 安裝eslint-config-airbnb:

yarn add eslint-config-airbnb -D

2. 項(xiàng)目下增加.eslintrc.json文件：
   其實(shí)直接在package.json中把eslintConfig下extends改成airbnb也可以，但是考慮到后面可能要自定義一些配置項(xiàng)，以及會(huì)增加ts和tsx配置，還是加文件較好：
   .eslintrc.json：

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

注意：需要安裝VSCode的ESLint插件，才會(huì)在寫代碼時(shí)候校驗(yàn)提示

api的baseUrl配置

1. 項(xiàng)目下增加.env.development文件：

REACT_APP_API_URL=http://10.234.216.150:7300

2. 項(xiàng)目下增加.env.production文件：

REACT_APP_API_URL=http://abcefg.com

3. js中代碼中引用：

const baseUrl = process.env.REACT_APP_API_URL;

這樣，開發(fā)環(huán)境的baseUrl就是“http://10.234.216.150:7300”，生產(chǎn)環(huán)境的就是“http://abcefg.com”。

注意：環(huán)境變量都必須以REACT_APP_為前綴，否則會(huì)被忽略。

注意：如果想在開發(fā)環(huán)境自定義api變量，建議不要直接修改.env.development文件，這個(gè)文件是給團(tuán)隊(duì)開發(fā)用的，請(qǐng)新增.env.development.local文件進(jìn)行配置私用，這個(gè)文件也會(huì)自動(dòng)被git忽略（CRA設(shè)置的），不用提交。其他一些配置文件還有好多，我覺得暫時(shí)用不到的。

增加 staging 環(huán)境配置：

有時(shí)候，光開發(fā)環(huán)境和生產(chǎn)環(huán)境配置還不夠，因?yàn)檫€有測(cè)試環(huán)境。就需要加一個(gè)staging配置，這個(gè)稍微有些復(fù)雜。

1. 安裝env-cmd包

yarn add env-cmd

2. 項(xiàng)目下增加.env.staging文件

REACT_APP_API_URL=http://staging.abcdefg.com

3. 其實(shí)這時(shí)候在package.json中scripts下增加"build:staging"即可

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

但是這樣打出來的包也是在build文件夾下面。
如果想打包到另外一個(gè)文件夾下面，繼續(xù)看下面

4. 項(xiàng)目下新建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環(huán)境
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",

這樣運(yùn)行yarn run build:staging時(shí)候就會(huì)自動(dòng)打包測(cè)試環(huán)境到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是同時(shí)打包生產(chǎn)環(huán)境和測(cè)試環(huán)境