成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用prince-cli，輕松構(gòu)建高性能React SPA項(xiàng)目~

roundstones / 1104人閱讀

摘要：對(duì)模塊進(jìn)行了打包，監(jiān)聽文件更改刷新等功能，創(chuàng)建了個(gè)服務(wù)，分別為靜態(tài)資源服務(wù)用于代理本地資源，與自刷新瀏覽器請(qǐng)求服務(wù)用于接受，請(qǐng)求，返回?cái)?shù)據(jù)服務(wù)用于收發(fā)消息。除了項(xiàng)目，還可以換成項(xiàng)目。項(xiàng)目地址如果覺得對(duì)你有所幫助，多謝支持

prince-cli 快速指南

這是一個(gè)為快速創(chuàng)建SPA所設(shè)計(jì)的腳手架，旨在為開發(fā)人員提供簡單規(guī)范的開發(fā)方式、服務(wù)端環(huán)境、與接近native應(yīng)用的體驗(yàn)。使用它你能夠獲得下面這些便利

快速開始編寫react spa頁面，在瀏覽器對(duì)react組件打斷點(diǎn)調(diào)試

瀏覽器實(shí)時(shí)刷新，控制臺(tái)、redux-devtools可隨時(shí)查看狀態(tài)

模擬ajax、jsonp請(qǐng)求與webSocket消息，真實(shí)服務(wù)端環(huán)境

擁有類似native的翻頁路由，且刷新頁面reducer會(huì)緩存狀態(tài)不會(huì)丟失

目前此腳手架由我個(gè)人設(shè)計(jì)搭建維護(hù)，并不斷完善中，歡迎issues

使用方式

安裝node.js（v8.0.0+）以及對(duì)應(yīng)版本npm

在需要?jiǎng)?chuàng)建項(xiàng)目的路徑打開cmd命令行

執(zhí)行 npm install prince-cli -g 全局安裝prince-cli

執(zhí)行 prince new myApp 新建react SPA項(xiàng)目（myApp為新項(xiàng)目名，可隨意更改）

進(jìn)入項(xiàng)目路徑 cd myApp

執(zhí)行 npm install 拉取項(xiàng)目依賴包

執(zhí)行 npm run dev 啟動(dòng)開發(fā)環(huán)境

開發(fā)完成執(zhí)行 npm run build 打包發(fā)布

開發(fā)規(guī)范 
########### myApp項(xiàng)目結(jié)構(gòu) ###########
├── mock
│   ├── mock.api.js         // rest請(qǐng)求接口
│   ├── socket.api.js       // websocket接口
│   └── data
│       ├── mockData.js     // rest請(qǐng)求mock數(shù)據(jù)
│       └── socketData.js   // websocket推送mock數(shù)據(jù)
├── src
│   ├── action              // 事件
│   ├── assests             // 靜態(tài)文件
│   ├── component           // 組件
│   ├── less                // 樣式
│   ├── reducers            // 狀態(tài)管理
│   ├── route               // 路由
│   └── service             // 方法
├── entry.js                // 入口
├── package.json            // npm配置
├── postcss.config.js       // postcss配置
├── server.js               // 本地服務(wù)端
├── temp.html               // 模板
└── webpack.config.js       // webpack配置

在開始之前，你需要先了解react，redux，redux-router4，less的大概使用方法，請(qǐng)查閱官方文檔。

service概念并不屬于react原始體系，通俗來講就是將頁面組件的業(yè)務(wù)邏輯抽離到一個(gè)獨(dú)立的類，避免在component里做過多的邏輯處理，component僅調(diào)用service的方法，拿到數(shù)據(jù)并render渲染。

在action、reducers、service中都有公共的common文件夾，抽出每個(gè)頁面組件都需要使用的方法（在這些公共的類里包含了一些socket消息訂閱、fetch請(qǐng)求、redux本地緩存中間件的封裝，可以根據(jù)業(yè)務(wù)需求增減）。

server.js 對(duì)模塊進(jìn)行了打包，監(jiān)聽文件更改刷新等功能，創(chuàng)建了3個(gè)服務(wù)，分別為靜態(tài)資源服務(wù)：http://localhost:4396（用于代理本地資源，與自刷新瀏覽器）；rest請(qǐng)求服務(wù)：http://localhost:4397（用于接受ajax，jsonp請(qǐng)求，返回mock數(shù)據(jù)）；webSocket服務(wù)：ws://localhost:4398（用于收發(fā)webSocket消息）。一般來說不需要更改此文件

具體請(qǐng)求接口、訂閱發(fā)送webSocket消息方法都在公共service中，且有代碼演示，使用尤為方便

PS：此腳手架設(shè)計(jì)目標(biāo)是化繁為簡，保留核心功能，減小學(xué)習(xí)成本，適用于小規(guī)模SPA快速開發(fā)，沒有引入eslint代碼測(cè)試、單元測(cè)試等，如有需要可自行添加

構(gòu)建模塊

命令行相關(guān)：commander、shelljs、git-clone等

打包相關(guān)：webpack4、babel等

服務(wù)相關(guān)：koa2、browser-sync、ws等

應(yīng)用相關(guān)：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/

結(jié)語

除了SPA之外，服務(wù)端路由的項(xiàng)目也可以基于此腳手架進(jìn)行改造。除了React項(xiàng)目，還可以換成vue、angular項(xiàng)目。目前我正在對(duì)此進(jìn)行封裝，在prince-cli中通過配置化加載不同場(chǎng)景，不同框架的項(xiàng)目。

關(guān)于從零搭建腳手架的過程，其實(shí)并不困難，最重要的是設(shè)計(jì)，而不是實(shí)現(xiàn)。大型腳手架也是基于這些模塊設(shè)計(jì)，只是提供了更多的可配置功能，以后會(huì)對(duì)此方面專門進(jìn)行整合分享。

prince-cli 項(xiàng)目地址：https://github.com/yukilzw/pr...
如果覺得對(duì)你有所幫助，多謝支持 ~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96385.html

相關(guān)文章

  • 珠峰前端架構(gòu)師培養(yǎng)計(jì)劃

    摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實(shí)踐經(jīng)驗(yàn)相關(guān)字眼。我們主要從端公眾號(hào)移動(dòng)端小程序三大平臺(tái)進(jìn)行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢(shì)。技術(shù)的優(yōu)勢(shì)互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...

    ccj659 評(píng)論0 收藏0

  • 《從零構(gòu)建前后分離web項(xiàng)目》：開篇 - 縱觀WEB歷史演變

    摘要：更詳細(xì)的內(nèi)容下一章開篇深入聊聊前后分離講述關(guān)于我目前在寫從零構(gòu)建前后分離項(xiàng)目系列，修正和補(bǔ)充以此為準(zhǔn)不斷更新的項(xiàng)目實(shí)踐地址彩蛋提前預(yù)覽下一章傳送門 開篇 ： 縱觀WEB歷史演變 在校學(xué)習(xí)和幾年工作工作中不知不覺經(jīng)歷了一半的 WEB 歷史演變、對(duì)近幾年的發(fā)展比較了解，結(jié)合經(jīng)驗(yàn)聊聊 WEB 發(fā)展歷史。 演變不易，但也是必然，因?yàn)闉槿耸冀K要進(jìn)步。 WEB 的發(fā)展史 一、開山鼻祖 - 石器時(shí)代...

    tracy 評(píng)論0 收藏0

  • 《從零構(gòu)建前后分離web項(xiàng)目》：開篇 - 縱觀WEB歷史演變

    摘要：更詳細(xì)的內(nèi)容下一章開篇深入聊聊前后分離講述關(guān)于我目前在寫從零構(gòu)建前后分離項(xiàng)目系列，修正和補(bǔ)充以此為準(zhǔn)不斷更新的項(xiàng)目實(shí)踐地址彩蛋提前預(yù)覽下一章傳送門 開篇 ： 縱觀WEB歷史演變 在校學(xué)習(xí)和幾年工作工作中不知不覺經(jīng)歷了一半的 WEB 歷史演變、對(duì)近幾年的發(fā)展比較了解，結(jié)合經(jīng)驗(yàn)聊聊 WEB 發(fā)展歷史。 演變不易，但也是必然，因?yàn)闉槿耸冀K要進(jìn)步。 WEB 的發(fā)展史 一、開山鼻祖 - 石器時(shí)代...

    songjz 評(píng)論0 收藏0

  • angular，react & vue

    摘要：由進(jìn)行開發(fā)和維護(hù)，代發(fā)布于年月，現(xiàn)在主要是。狀態(tài)是只讀的，只能通過來改變，以避免競爭條件這也有助于調(diào)試。文件大小為，而為，為。請(qǐng)記住，性能基準(zhǔn)只能作為考慮的附注，而不是作為判斷標(biāo)準(zhǔn)。使用的人員報(bào)告說，他們永遠(yuǎn)不必閱讀庫的源代碼。 本文當(dāng)時(shí)寫在本地，發(fā)現(xiàn)換電腦很不是方便，在這里記錄下。 angular，react & vue 2018/07/23 2016年，對(duì)于JavaScript來說...

    jiekechoo 評(píng)論0 收藏0

  • React+Koa+MongoDB+Docker開發(fā)環(huán)境

    摘要：已經(jīng)發(fā)布到，只要在環(huán)境下安裝即可。下面通過來構(gòu)建開發(fā)環(huán)境，提高開發(fā)體驗(yàn)。容器容器的實(shí)質(zhì)是進(jìn)程，但與直接在宿主執(zhí)行的進(jìn)程不同，容器進(jìn)程運(yùn)行于屬于自己的獨(dú)立的命名空間。部署開發(fā)環(huán)境部署開發(fā)環(huán)境其實(shí)很簡單，只需要配置和即可。 前言 本次博文依然是對(duì) multi-spa-webpack-cli 的擴(kuò)充和完善。 集成 mongoose。 集成 Docker 開發(fā)環(huán)境。 multi-spa-w...

    sarva 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<