创建项目
npx create-react-app my-app
因为默认是用yarn安装，所以建议后面也用yarn安装依赖
打包成相对路径配置
在package.json中增加：
"homepage": "."
eslint配置成airbnb风格
- 安装
eslint-config-airbnb:
yarn add eslint-config-airbnb -D
- 项目下增加
.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配置
- 项目下增加
.env.development文件：
REACT_APP_API_URL=http://10.234.216.150:7300
- 项目下增加
.env.production文件：
REACT_APP_API_URL=http://abcefg.com
- 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配置，这个稍微有些复杂。
- 安装
env-cmd包
yarn add env-cmd
- 项目下增加
.env.staging文件
REACT_APP_API_URL=http://staging.abcdefg.com
- 其实这时候在package.json中scripts下增加"build:staging"即可
{
scripts: {
"build:staging": "env-cmd .env.staging npm run build",
}
}
但是这样打出来的包也是在build文件夹下面。
如果想打包到另外一个文件夹下面，继续看下面
- 项目下新建
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');
}
- package.json中scripts下改写"build:staging"：
"build:staging": "node buildStaging.js",
这样运行yarn run build:staging时候就会自动打包测试环境到buildstaging文件夹下
- 最终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是同时打包生产环境和测试环境
