react脚手架

总体架构

基于react官方脚手架，并增加自选框架（如下）。优点是增加可配置性，并且每次创建都会保持和官方最新同步。

类型 | 可选框架名称
:- | :-
语言 | JavaScript / TypeScript
状态管理库 | Redux / Mobx
css预处理器 | SCSS / LESS / styled-components
UI组件 | Antd / Ant-mobile
代码规范 | Airbnb
HTTP库 | Axios
路由 | react-router

安装

npm i xd-react-cli -g

初始化项目

react-cli create

用户第一次创建有两个选项

- default (JavaScript, Redux, Antd, Less, Router, ESLint) 默认配置
- Manually select features 选择配置

第二次创建的时候会多一个用户上次选择过的选项配置config

项目中使用

$3

启动本地调试 启动地址和配置可以在config-overrides.js修改

$3

应用打包

$3

测试应用

$3

将react-scripts暴露到应用顶层，操作不可逆，弹射后不能随官方脚手架升级

目录

> public

favicon.icn --项目图标

index.html --html入口

manifest.json --PWA应用配置文件

> src

api --异步请求集合

assets --静态资源

components --细小的组件，能复用

routes --路由集合管理

modules --各个业务模块

stores --状态管理

style --全局样式（页面样式写在各自页面中）

utils --工具类文件（包括fetch等）

test --测试目录

App.js --应用入口文件

index.js --入口文件

serviceWorker.js -- PWA应用缓存离线策略，需要在index.js中开启

> config-overrides.js -- 配置文件 Webpack devServer jest都在这里配置

> .babelrc -- babel相关配置

关于config-overrides配置

完全不用担心无法定制的问题，用户可以在里面配置Webpack devServer jest。可以在这里添加自定义的config配置来增加修改loader, plugin, optimization进行配置。webpackMerge使用混入的方式去添加config。

代码规范

请遵守Airbnb JavaScript的代码规范：Airbnb JavaScript 代码规范中文版

未完成

1. TypeScript相关支持，后期加上