使用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等
• 打包相關：webpack四、babel等
• 服務相關：koa二、browser-sync、ws等
• 應用相關：react、redux、react-router四、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...
若是以爲對你有所幫助，多謝支持 ~