使用prince-cli，轻松构建高性能React SPA项目~

prince-cli 快速指南

这是一个为快速创建SPA所设计的脚手架，旨在为开发人员提供简单规范的开发方式、服务端环境、与接近native应用的体验。使用它你能够获得下面这些便利

• 快速开始编写react spa页面，在浏览器对react组件打断点调试
• 浏览器实时刷新，控制台、redux-devtools可随时查看状态
• 模拟ajax、jsonp请求与webSocket消息，真实服务端环境
• 拥有类似native的翻页路由，且刷新页面reducer会缓存状态不会丢失

目前此脚手架由我个人设计搭建维护，并不断完善中，欢迎issues

使用方式

1. 安装node.js（v8.0.0+）以及对应版本npm
2. 在需要创建项目的路径打开cmd命令行
3. 执行 npm install prince-cli -g 全局安装prince-cli
4. 执行 prince new myApp 新建react SPA项目（myApp为新项目名，可随意更改）
5. 进入项目路径 cd myApp
6. 执行 npm install 拉取项目依赖包
7. 执行 npm run dev 启动开发环境
8. 开发完成执行 npm run build 打包发布

开发规范

########### myApp项目结构 ###########
├── mock
│   ├── mock.api.js         // rest请求接口
│   ├── socket.api.js       // websocket接口
│   └── data
│       ├── mockData.js     // rest请求mock数据
│       └── socketData.js   // websocket推送mock数据
├── src
│   ├── action              // 事件
│   ├── assests             // 静态文件
│   ├── component           // 组件
│   ├── less                // 样式
│   ├── reducers            // 状态管理
│   ├── route               // 路由
│   └── service             // 方法
├── entry.js                // 入口
├── package.json            // npm配置
├── postcss.config.js       // postcss配置
├── server.js               // 本地服务端
├── temp.html               // 模板
└── webpack.config.js       // webpack配置

• 在开始之前，你需要先了解react，redux，redux-router4，less的大概使用方法，请查阅官方文档。
• service概念并不属于react原始体系，通俗来讲就是将页面组件的业务逻辑抽离到一个独立的类，避免在component里做过多的逻辑处理，component仅调用service的方法，拿到数据并render渲染。
• 在action、reducers、service中都有公共的common文件夹，抽出每个页面组件都需要使用的方法（在这些公共的类里包含了一些socket消息订阅、fetch请求、redux本地缓存中间件的封装，可以根据业务需求增减）。
• server.js 对模块进行了打包，监听文件更改刷新等功能，创建了3个服务，分别为静态资源服务：http://localhost:4396（用于代理本地资源，与自刷新浏览器）；rest请求服务：http://localhost:4397（用于接受ajax，jsonp请求，返回mock数据）；webSocket服务：ws://localhost:4398（用于收发webSocket消息）。一般来说不需要更改此文件
• 具体请求接口、订阅发送webSocket消息方法都在公共service中，且有代码演示，使用尤为方便
• PS：此脚手架设计目标是化繁为简，保留核心功能，减小学习成本，适用于小规模SPA快速开发，没有引入eslint代码测试、单元测试等，如有需要可自行添加

构建模块

• 命令行相关：commander、shelljs、git-clone等
• 打包相关：webpack4、babel等
• 服务相关：koa2、browser-sync、ws等
• 应用相关：react、redux、react-router4、less等

推荐文档

• React中文文档：https://doc.react-china.org/
• Redux中文文档：http://cn.redux.js.org/
• React-Router4英文文档: https://reacttraining.com/rea...
• Less中文文档：http://lesscss.cn/

结语

• 除了SPA之外，服务端路由的项目也可以基于此脚手架进行改造。除了React项目，还可以换成vue、angular项目。目前我正在对此进行封装，在prince-cli中通过配置化加载不同场景，不同框架的项目。
• 关于从零搭建脚手架的过程，其实并不困难，最重要的是设计，而不是实现。大型脚手架也是基于这些模块设计，只是提供了更多的可配置功能，以后会对此方面专门进行整合分享。

prince-cli 项目地址：https://github.com/yukilzw/pr...
如果觉得对你有所帮助，多谢支持 ~