Create React App以下简称为CRA

创建项目

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”，生产环境的就是“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文件夹下面。如果想打包到另外一个文件夹下面，继续看下面 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');
}

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设置，有两个作用（我自己测试的）。

vscode会读取这个值作为根目录去查找模块
只能设置为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'

其他

引入raw-loader加载glsl文件

config-overrides.js文件中增加

addWebpackModuleRule({ test: /\.vert$/, use: 'raw-loader' })

我的config-overrides.js完整文件：

const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackModuleRule,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@font-size-base': '13px', // 设计稿主要字体是12px
      '@border-color-base': '#e4e4e4', // 边框色
      '@primary-color': '#fe6f3d', // 主色 橙色
      '@table-header-bg': '#fff', // 表格表头背景色
      '@heading-color': '#5e5e5e', // 标题色
      '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, .15)', // 浮层阴影
    },
  }),
  addWebpackModuleRule({ test: /\.vert$/, use: 'raw-loader' })
);

Create React App无eject配置