摘要：对模块进行了打包，监听文件更改刷新等功能，创建了个服务，分别为静态资源服务用于代理本地资源，与自刷新浏览器请求服务用于接受，请求，返回数据服务用于收发消息。除了项目，还可以换成项目。项目地址如果觉得对你有所帮助，多谢支持
prince-cli 快速指南
这是一个为快速创建SPA所设计的脚手架，旨在为开发人员提供简单规范的开发方式、服务端环境、与接近native应用的体验。使用它你能够获得下面这些便利
快速开始编写react spa页面，在浏览器对react组件打断点调试
浏览器实时刷新，控制台、redux-devtools可随时查看状态
模拟ajax、jsonp请求与webSocket消息，真实服务端环境
拥有类似native的翻页路由，且刷新页面reducer会缓存状态不会丢失
目前此脚手架由我个人设计搭建维护，并不断完善中，欢迎issues
使用方式安装node.js（v8.0.0+）以及对应版本npm
在需要创建项目的路径打开cmd命令行
执行 npm install prince-cli -g 全局安装prince-cli
执行 prince new myApp 新建react SPA项目（myApp为新项目名，可随意更改）
进入项目路径 cd myApp
执行 npm install 拉取项目依赖包
执行 npm run dev 启动开发环境
开发完成执行 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...
如果觉得对你有所帮助，多谢支持 ~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96385.html
摘要：公司的招聘要求都提到了至少熟悉其中一种前端框架，有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。技术的优势互联网前端大潮后，前端出现了大框架，分别是与。 1、技术选型的背景前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员...
摘要：更详细的内容下一章开篇深入聊聊前后分离讲述关于我目前在写从零构建前后分离项目系列，修正和补充以此为准不断更新的项目实践地址彩蛋提前预览下一章传送门 开篇 ： 纵观WEB历史演变 在校学习和几年工作工作中不知不觉经历了一半的 WEB 历史演变、对近几年的发展比较了解，结合经验聊聊 WEB 发展历史。 演变不易，但也是必然，因为为人始终要进步。 WEB 的发展史 一、开山鼻祖 - 石器时代...
摘要：更详细的内容下一章开篇深入聊聊前后分离讲述关于我目前在写从零构建前后分离项目系列，修正和补充以此为准不断更新的项目实践地址彩蛋提前预览下一章传送门 开篇 ： 纵观WEB历史演变 在校学习和几年工作工作中不知不觉经历了一半的 WEB 历史演变、对近几年的发展比较了解，结合经验聊聊 WEB 发展历史。 演变不易，但也是必然，因为为人始终要进步。 WEB 的发展史 一、开山鼻祖 - 石器时代...
摘要：由进行开发和维护，代发布于年月，现在主要是。状态是只读的，只能通过来改变，以避免竞争条件这也有助于调试。文件大小为，而为，为。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。使用的人员报告说，他们永远不必阅读库的源代码。 本文当时写在本地，发现换电脑很不是方便，在这里记录下。 angular，react & vue 2018/07/23 2016年，对于JavaScript来说...
摘要：已经发布到，只要在环境下安装即可。下面通过来构建开发环境，提高开发体验。容器容器的实质是进程，但与直接在宿主执行的进程不同，容器进程运行于属于自己的独立的命名空间。部署开发环境部署开发环境其实很简单，只需要配置和即可。 前言 本次博文依然是对 multi-spa-webpack-cli 的扩充和完善。 集成 mongoose。 集成 Docker 开发环境。 multi-spa-w...
阅读 2746·2021-11-16 11:45
阅读 1653·2021-09-26 10:19
阅读 2050·2021-09-13 10:28
阅读 2802·2021-09-08 10:46
阅读 1528·2021-09-07 10:13
阅读 1524·2019-08-30 13:50
阅读 1373·2019-08-30 11:17
阅读 1454·2019-08-29 13:18
