react 项目模版(js) v2.0

这个版本是基于CRA@4和craco@6构建的. 主要是为了避免eject导致的各种问题,并且简化了项目结构. 目前这个模版仍然兼容到 IE9.

构建过程

创建初始项目CRA

yarn create react-app my-react-app

创建配置文件

cd my-react-app
touch craco.config.js

修改package.json

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }
}

安装并配置antd@x(兼容 IE9)

yarn add craco-antd -D
yarn add antd@^3

创建antd自定义样式文件. (antd@3.x 支持的自定义变量)

cd ./src
touch antd.customize.less

查看/craco.config.js

使用 less,并支持 css-module

yarn add craco-less -D

查看/craco.config.js

使用 less 全局变量

安装插件

yarn add -D craco-plugin-style-resources-loader

注意: 由于同时安装了craco-antd, 这个插件必须配置在craco-antd的后面 查看/craco.config.js

使用 mobx@4.x

yarn add mobx@^4 mobx-react@^6

允许使用装饰器

yarn add @babel/plugin-proposal-decorators -D

查看/craco.config.js

/jsconfig.json

{ "experimentalDecorators": true }

使用 react-router

yarn add react-router

polyfill

babel@7.x开始, 使用以下方式

yarn add core-js regenerator-runtime --save

在./src/index.js头部引入

import 'core-js'
import 'regenerator-runtime'

CRA 浏览器支持

yarn add react-app-polyfill --save

在./src/index.js头部引入

import 'react-app-polyfill/ie9'
import 'react-app-polyfill/stable'

引入 eslint

参考文章

yarn add eslint -D

新增配置文件: /.eslint.js,.eslintignore