Create React App无eject配置

Create React App如下简称为CRA

建立项目

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”，生产环境的就是“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是同时打包生产环境和测试环境

直接引用src下模块设置（absolute path，和alias相似）

通常都是经过alias配置的，可是CRA不支持，为何去问做者。

项目下面增长jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "jsx": "preserve"
  }
}
复制代码

这里baseUrl设置，有两个做用（我本身测试的）。

1. vscode会读取这个值做为根目录去查找模块
2. 只能设置为src，由于CRA会读取这个值并添加webpack的resolve配置里做为打包依赖路径，若是不是src或者node_modules，启动项目会报错只支持这俩值。node_modules配不配无所谓，始终会被添加

jsx的设置，是由于不设置的话，import一个jsx文件，没法连接过去（cmd+左键）

若是有eslint，请在eslint中rules中加配置项：

不配的话，eslint会报错找不到相关模块（虽然能正常使用了）

// 关闭对mi，api，utils的import检验，其余的必定要报错，防止滥用
    'import/no-unresolved': ['error', { ignore: ['mi', 'api', 'utils'] }],
复制代码

这样的话，只有引用mi、api、utils这三个模块，eslint才不会报错。

注意：也能够经过配置setting选项（eslint-plugin-import的配置），让src下的全部模块引用都不报错，但不是我想要的，我不想让项目人员滥用这个功能。

使用

以前是经过 import { xxx } from '../../../mi'这样引用公共组件

如今只须要import { xxx } from 'mi'