react-enhanced-cli

他是什么

基于 React 官方 CLI 工具 create-react-app，为 react-enhanced 定制的开箱即用 CLI

优势

集成了众多优秀的三方库，加持页面功能实现、开箱即用

| 库名 | 描述 | | ------------------------------------------------------------------------ | ---------------------- | | react | 核心 | | react-enhanced | 增强器框架 | | rxjs | 响应式编程 | | redux-observable | 响应式编程(副作用管理) | | ant-design | UI 框架 | | react-redux | 状态管理 | | less | 动态样式语言 | | react-router | 路由 | | lodash | 工具库 | | immutable | 不可变数据操作库 | | api-manage | api 服务解决方案 | | axios | 请求库 | | data-mock | 数据模拟服务 | | mockjs | 模拟库 | | classnames | class 条件处理 |

集成了代码质量管理工具 eslint 和 stylelint

建议您的编辑器中安装相应的插件，在生产环境中关闭代码检测，打包部署则开启，在开发过程中通过编辑器的插件更佳方便开发以及质量管理

CLI 默认是采用这种方式开发，当然你也可以设置全关闭，具体配置请查看文件 confing/custom.config.js

相应的检测规则配置分别在 .eslintrc 和 .stylelintrc.json

PS: 动手能力强的老铁，亦可自定义修改配置（因为是基于官方 CLI，一个字“稳”）

使用

# 安装
npm install react-enhanced-cli -g

# 创建工程
rec create rec-app

# 进入目录
cd rec-app

# 启动
npm run start

命令

Javascript

新建 rec-app 文件夹并初始化工程

# 初始化并下载资源
rec create rec-app

# 初始化（不下载资源）
rec init rec-app --no-install

在 rec-app 文件夹中初始化工程

# 初始化并下载资源
rec init rec-app

# 初始化（不下载资源）
rec init rec-app --no-install

Typescript

如果要生成 Typescript 工程 需要在命令上添加 --ts

新建 rec-app-ts 文件夹并初始化工程

# 初始化并下载资源
rec create rec-app-ts --ts

# 初始化（不下载资源）
rec init rec-app-ts --ts --no-install

在 rec-app-ts 文件夹中初始化工程

# 初始化并下载资源
rec init rec-app-ts --ts

# 初始化（不下载资源）
rec init rec-app --ts --no-install

文件结构

src
|
└── api # api列表
│  │-- ...
│
└── assets # 开发资源 如：图片
│  │-- ...
│
└── components # 展示组件
│  │-- <component name> # 组件名称
|  |  │-- index.jsx
|  |  └── index.less / index.css
|  | ...
|
└── containers # 容器组件
│  │-- <container name> # 容器组件名称
|  |  │-- index.jsx
|  |  └── index.less / index.css
|  | ...
|
└── mocks # 模拟数据
│  │-- ...
│
└── models # 组件模型
│   │-- ...
│
└── pages # 页面入口文件（在里面可以配置多页面）
│  │-- <page name> # 页面名称
|  |  │-- ...
|  | ...
|
└── styles # 全局样式
│  │-- ...
│
└── utils # 工具库
│  │-- ...
│

PS: src下任意的 styles 文件夹里面的样式 如：less/css，都不会经过css modules处理

License

MIT