來來來，你可能沒見過這麼全的實戰吧

習慣，後期如有修改會在此處做全局說明。

前言

做爲一個自認爲高產博主，我已經很久沒發文了，以前在segmentfault上面發的文也是刪的差很少了，仍是怪我一開始給本身挖坑亂定目標，結果都滯後了，並且也沒有什麼動靜，反思了很久，決定不作太過宏偉的目標，可是也不想簡略了事，因此歸結了本篇內容，作了一份涵蓋一些前端圈現在比較流行的技術實戰，包括(Node, Koa, Express, Pug, MongoDB, Sass, Gulp, React, Vue, Webpack, React-Native, Weapp, Electron)等等等等等，不過不是同一個應用裏都用了哦...不要誤會我瞎搞，整個項目拆分了多個應用也就是多個不一樣的包，分別應用了其中一些技術。

忘了說作個什麼東西了...大概就是一個分享交流的社區，具體的樣子下面我在細說。

在我發文的以前，我已經把用Express搭建的API服務和用Pug模板輸出傳統網站的形式兩個包完成了，可能以後會修修補補，不過大概意思已經出來了。

還有一點...本篇只是作統籌性的說明，沒有涵蓋太多技術相關的內容，因此沒有發在博客上。

項目地址：你沒有見過的終極實戰。

管理

雖然東西很是的多，可是強迫症的我並不想給它拆分紅不少倉庫(一個倉庫是一個包的形式)，全部內容我都放在了一個倉庫裏(practice)，只是以根文件夾作區分，用yarn的workspace的方式來管理全部的包，分別是server(API數據服務)、site(傳統模板網站)、 manage(後臺管理系統)、weapp(微信小程序)、spa(移動端單頁應用)、 native(原生APP)和desktop(桌面應用)。因爲暫時只完成了server和site，因此其餘目錄就暫時刪除了，後續寫的時候在加回來。

關於

我仍是要詳細的說一下整個項目和計劃，否則你們可能也不知道我作的是個什麼東西，分別用上述的技術作什麼地方。每一個包產生的應用我儘可能多貼一下圖片，吸引一下你們的目光，嘻嘻。

server

首先是API服務，我一開始原本是打算用Koa寫的，可是我自己對Express更熟悉一點，爲了快速迭代就仍是用了Express，不過也準備這一波API沒有問題的話仍是換成Koa來寫，不想同一個技術用屢次嘛，這裏我就貼一個測試覆蓋率的圖吧。

其中沒有跑到的測試是因爲當時在處理異常的時候，沒有統一拋到一個地方，致使不少異常處理測試跑不到，後來問了幾個前輩才知道要把異常抽離了，真笨啦...不過大致仍是跑完了的，初始化大概三十幾個API，也單獨寫了一份API文檔,，詳細說明你們就看API文檔吧。

site

而後是傳統網站的形式，也就是相似於java(jsp)的形式，原本這種形式數據應該來源於數據庫的，可是爲了我上述的API服務的公共性，因此這個包，並無操做數據庫的內容，全部數據仍是來源於API服務，技術棧爲Express結合Pug完成。

原本我是打算作完server就發文的，可是仍是怕沒有效果圖，你們興趣欠佳，因此仍是把這個整站弄出來給你們看一下大概是什麼類型的應用。

原本想截個gif，可是好像有點大，仍是算了，靜態圖片大概也能看出是個什麼東東，相似於掘金、cnode或者是segmentfault的社區網站，只是功能簡單了一些並且。頁面也參照了很多，還請見諒。

在寫site的時候雖然已經吸收了了一些經驗，可是仍是以爲不夠完美，強迫症哎，除了自己Express和Pug之外，樣式用了Sass，編譯用了Gulp，雖然少，可是仍是涉及到了，不過測試沒有寫誒，實在是時間太少，腦子太疼，後續再補測試吧，畢竟我這個包是個應用包....見諒！

計劃

記於2018-07-19：因爲剛剛發項目，可能裏面的我沒有察覺的bug會陸續暴露出來，因此準備這一段時間都用來完善server和site，等到這兩包趨於穩定以後，就會啓動manage後臺管理系統的內容，技術棧爲React和Antd，我是特別喜歡這兩個東東的，因此其實心裏仍是但願快點的...

博客

因爲自己內容仍是比較多的，因此博客我也是每一篇對應一個內容，詳細的實現過程會在博客裏面體現出來，若是錯誤除了幫忙指正一下還請多多包涵，現階段完成了兩篇：

1. 終極實戰(一) - 搞個 Node 的數據服務
2. 終極實戰(二) - 用 Pug 模板輸出傳統網站

結語

其實當時作這個的時候目的很簡單，想要更熟練的使用這些技術、想要小星星等等，作的時候收穫真的不少，有不少很是好的前輩幫我答疑解惑，讓我不斷的推翻以前寫的代碼，不斷的優化它們（PS:如今可能也還有不少缺陷），我自己也提高了蠻多的，同時也但願本身的博客或者是代碼能帶給更多人幫助！！！