資訊專欄INFORMATION COLUMN
摘要：在項目開始之前，不能心急立刻去搭建，需要設(shè)定幾個步驟來開展，接下來大概的說一下我從技術(shù)選型到項目前端搭建好的整個生命周期。開發(fā)該項目的底層的內(nèi)容遠(yuǎn)不止這些，但由于公司制度規(guī)定，只能大概的闡述了在從接手到選型到搭建完畢這到的過程的做法和思考。
前段時間部門要基于一個系統(tǒng)的基礎(chǔ)上開發(fā)一個管理平臺，于是我接手了該平臺的重活，因為上一個平臺我用了vue搭建，所以這次想用react來搭建。在項目開始之前，不能心急立刻去搭建，需要設(shè)定幾個步驟來開展，接下來大概的說一下我從技術(shù)選型到項目前端搭建好的整個生命周期。
技術(shù)選型
在項目開始之前，首先要決定該項目所采用的技術(shù)框架。在該階段，需要分幾個維度來選擇： a)核心的前端框架； b）該框架所配套的路由器； c）狀態(tài)管理器； d）異步請求npm包； f）組件庫； g）前端構(gòu)建工具； h）聯(lián)調(diào)前的mock層技術(shù)；
基于這些維度，我選擇了react一系列核心技術(shù)和其配套技術(shù)，webpack由于求穩(wěn)所以選擇了一個不高的版本（怕最新的版本會有很多想不到的坑），然后組件庫因為上一個項目中用了element.ui，所以比較熟悉他的用法（最主要該組件庫里面的坑我上一個項目踩過，所以知道要如何回避）；至于異步請求我還是選擇了用superagent（原因在第2步中會說到），mock層我選擇了mock.js（但最后我還是沒使用，后續(xù)會說）；
- 技術(shù)調(diào)研
雖然已經(jīng)選擇了要使用的技術(shù)，但開始之前還是有必要做一個較為深入的調(diào)研，這樣會對已經(jīng)選擇的技術(shù)又一個大概的使用思路和適不適合使用該技術(shù)做一個最后的思考。
a）對于react，我查了一下他最近一年半的發(fā)布版本，然后決定還是用回15.6的版本（好像是17年9月份發(fā)布的），主要是因為最新的里面好像要除去一些生命周期，如果用太新，可能在開發(fā)過程中會采坑，影響項目的進(jìn)度。
b) react-router的版本選擇，目前有rr3和rr4兩個版本，其中rr4不支持路由集中配置，這會引來一系列要解決的問題，如代碼分割（覺得官方處理分割的手法挺麻煩的）等，雖然rr4的組件路由配置挺不錯的，使得在大項目中不會導(dǎo)致路由文件過重，但對于不大的項目路由組件配置分散的話是不利于維護(hù)，所以還是決定用rr3（后續(xù)還有項目就用一下rr4體驗一下）。
c）對于基于react的項目來說，有兩個方面處理起來是挺麻煩的，一個是組件如何減少重復(fù)或者沒必要的渲染；另一方面是redux的使用，redux的使用無疑是加大了項目的復(fù)雜度，但不用也不行，這時候會有人說其實用mobx也挺不錯的，確實，他的響應(yīng)式編程挺好的，處理起來是的很簡單直觀，然而它存在很多暗坑（網(wǎng)上有說，這里就不說了）。
為什么說redux難，難于在處理異步和數(shù)據(jù)同步，這里有很多優(yōu)異的中間件如redux-thunk等，而該項目中我使用的是我自己寫的中間件（有興趣可以看一下我之前的博客如何寫redux中間件，由于公司有嚴(yán)格的規(guī)定不能泄露項目代碼，雖然都是自己寫，但還是不貼出來，后面會說一下實現(xiàn)原理）。
d）superagent和axios的選用，兩個都是很好的異步請求包，然而這里選擇前者，主要的原因可能偏主觀一點(diǎn)，是因為superagent用的多，比較熟悉，而且他的鏈?zhǔn)秸{(diào)用挺方便的。
- 創(chuàng)建項目
這里最主要公司有一套自主研發(fā)的代碼倉庫，不需要用到外面的代碼倉庫，所以只能從遵該倉庫的使用規(guī)則創(chuàng)建，如自己寫遠(yuǎn)程編譯的sh腳本，第一次創(chuàng)建還要寫打包腳本等等，其實這一步在其他公司是不用花太多時間在這一步的，直接創(chuàng)建上傳到github或者gitlab就好了。
- 配置打包
這里就沒什么好說的，直接看圖就行了。
- 預(yù)編譯器
這里的坑很大，主要不是因為sass使用難，而是因為sass是服務(wù)器編譯的，所以在遠(yuǎn)程倉庫中編譯的時候會經(jīng)常失敗，主要原因是因為node-sass中的vendor文件夾有兩個版本，一般本地mac開發(fā)webpack編譯的是:
而倉庫本身具有打包編譯功能，它用的是linux，linux則需要
看上去似乎很簡單，但發(fā)現(xiàn)這原因可找了很久。
異步請求
一般來說，一個前端項目不可能直接通過superagent或者axios發(fā)起請求，必須對其進(jìn)行封裝，我這里整個請求體系有三部分組成：
中間件
redux有很多優(yōu)秀的中間件，但要適合項目的需求還是由自身開發(fā)的中間件會更貼近。中間件的代碼其實就是二三十行左右，但卻比較抽象，中間件的結(jié)構(gòu)直接決定action的結(jié)構(gòu)，所以一般先制定好action的具體形式，然后反向推敲中間件的結(jié)構(gòu)。
mock層
本來想用mock.js，技術(shù)調(diào)研的時候就查清楚使用方法，以及如何使用，但以實際落實，卻很多問題，最主要的問題是mock更多的是支持jq形式的ajax，對于fetch事件不支持，只能通過其他插件如mock-react之類的，這使得mock層成為了一個累贅，與原來加入mock的初衷相反了，所以最后用來webpack-dev-server中的before服務(wù)器以及proxy代理，共同完成了mock層開發(fā)；
但有考慮到有可能一不小心mock會影響到線上，所以這里對所有的api進(jìn)行改造，如果是dev模式且開啟了mock層服務(wù)，所有的api后面加上’_mcok’字符串。
開發(fā)該項目的底層的內(nèi)容遠(yuǎn)不止這些，但由于公司制度規(guī)定，只能大概的闡述了在從接手到選型到搭建完畢這0到1的過程的做法和思考。如果有不對或理解有誤的地方可以指出來。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95637.html
摘要：前端日報精選騰訊前端團(tuán)隊社區(qū)源碼分析入門指南一些關(guān)于使用的心得基本類型與引用類型知多少掘金中文第期框架選型周刊第期入門系列模塊車棧重構(gòu)基于的網(wǎng)絡(luò)請求庫某熊的全棧之路的那些奇技淫巧的平凡之路模仿寫個數(shù)組監(jiān)聽掘 2017-07-01 前端日報 精選 Why you shouldn`t use Preact, Fast-React, etc. to replace React today -...
摘要：寫在前邊從去年一直陸續(xù)學(xué)習(xí)前端的知識，起初學(xué)習(xí)和寫頁面。自學(xué)前端主要還是有一個明確的目標(biāo)，這樣才能有效的學(xué)習(xí)和容易堅持。通過這次任務(wù)的實現(xiàn)能夠系統(tǒng)的了解前端的開發(fā)流程，以及一些工具的使用。 寫在前邊 從去年一直陸續(xù)學(xué)習(xí)前端的知識，起初學(xué)習(xí)HTML和CSS寫頁面。但是覺得自己對這方面沒有太好的天賦，學(xué)著忘著，很是痛苦。在接觸前端過程中，發(fā)現(xiàn)應(yīng)用javascript實現(xiàn)一些功能，自己比較...
閱讀 3353·2021-09-22 16:06
閱讀 3368·2021-09-02 15:40
閱讀 694·2019-08-30 15:54
閱讀 1095·2019-08-26 12:22
閱讀 1453·2019-08-26 12:17
閱讀 2801·2019-08-26 12:09
閱讀 577·2019-08-26 10:20
閱讀 855·2019-08-23 16:28
