資訊專欄INFORMATION COLUMN
摘要：對模塊進行了打包，監聽文件更改刷新等功能，創建了個服務，分別為靜態資源服務用于代理本地資源，與自刷新瀏覽器請求服務用于接受，請求，返回數據服務用于收發消息。除了項目，還可以換成項目。項目地址如果覺得對你有所幫助，多謝支持
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...
如果覺得對你有所幫助，多謝支持 ~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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
閱讀 1654·2021-09-26 10:19
閱讀 2051·2021-09-13 10:28
閱讀 2803·2021-09-08 10:46
閱讀 1530·2021-09-07 10:13
閱讀 1525·2019-08-30 13:50
閱讀 1374·2019-08-30 11:17
閱讀 1455·2019-08-29 13:18
