运用princecli，轻松构建高性能ReactSPA项目~

这是一个为疾速建立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&＃8230;
• Less中文文档：http://lesscss.cn/

结语

• 除了SPA以外，效劳端路由的项目也能够基于此脚手架举行革新。除了React项目，还能够换成vue、angular项目。现在我正在对此举行封装，在prince-cli中经由历程设置化加载差别场景，差别框架的项目。
• 关于从零搭建脚手架的历程，实在并不难题，最主要的是设想，而不是完成。大型脚手架也是基于这些模块设想，只是供应了更多的可设置功用，今后会对此方面特地举行整合分享。

prince-cli 项目地点：https://github.com/yukilzw/pr&＃8230;
假如以为对你有所协助，多谢支撑 ~