如何打造一個令人愉悅的前端開發環境（三）

乖小鬼發表於2016-09-08

往期回顧

前面2期都講得是瀏覽器端的東西比較多，包括Webpack，雖然是Node處理的，但是還是瀏覽器端用的多，對於現在的前端開發來說，不懂一點服務端的東西，簡直沒辦法活，一般的招聘要求都會加上要懂一門服務端的語言，例如：PHP，Java之類的啦。如圖所示：

所以我們這期就講Node的東西。

程咬金的三板斧

一、劈腦袋 — 工具鏈

Node在前端領域使用最為廣泛的就是工具鏈了，一期提到的構建工具都是Node寫的，當然還有其他很多工具，比如：京東工程化，百度開源構建工具FIS3，微信釋出的工作流工具等等一系列前端工具都是用Node寫的。廣泛的說，我認為一期提到的編輯器也算工具鏈的中的一種，Atom，vs code，Brackets都和Node密不可分。我個人感覺，Node的發展，實際上大大解放了前端的生產力，對於其他的服務端語言的依賴基本可以說降到最低，可以依據自己的需要編寫工具來完成技術目標。

這方面大家也可以自己來產出下，例如我自己寫了個小工具供自己使用：
vuejs 格式化 Atom外掛
現在下載量也不錯，有2000多了，還有好幾個issues沒有處理，哭！！

二、鬼剔牙 — 中間層

對於很多FE來說，要搭建一個後端環境很是麻煩，而且不熟悉，容易出錯（java，ruby，php），最糟的是自己不懂，出錯了完全不會除錯，你的表情此時是這樣的：

那麼在13、14年的時候，淘寶的前端團隊，開始連續發文，前後端分離的思考和實踐系列文章，提到了中途島計劃，也就是把Node作為前端和服務端的中間層，也就是這個架構，

從這種圖，不難看出，Node取代原來php，java乾的一部分事情，也就是我們常說的MVC框架中的VC基本都給Node來幹，FE乾的事情更多了，能掌握的東西多了，意味著對於自己更加靈活，可以考慮更多的元件化，工程化，效能監控，資料分析的事情。

這方面的實踐大家可以參考美團這邊的圖文：

美團酒店Node全棧開發實踐

三、掏耳朵 — 火熱的全棧

Full Stack developer 是近年來熱炒的一個概念，究其原因，跟Node的火熱不無關係，早些年講，一個人（大牛不算普通人）既要精通java又要精通js，html，css還是很困難，很多思維都不太一樣，分開也很正常，而Node的出現，為很多比較厲害的前端提供了切入到服務端的機會，語言層面的問題不在是難點，重要的對服務端的知識點的熟悉程度。Node的最後一個大招就是替換一些傳統的服務端語言，例如php，ruby，java等，在業務層上面使用Node來開發服務端完全不成問題。

例如： uber的排程系統幾乎都是用 node.js 編寫的

這方面的文章也有很多了，大家可以自己去搜搜看，包括各種框架，還有各種開源系統，都可以找到。當然也還有各種各樣的坑和問題以待大家去踩和解決。

說說自家事

我們公司來說的話，三板斧基本都用上了，打包構建自不用談，基本每個前端都會用到，第二板斧我們公司已經基本切換過來了，年後3月啟動，目前是所有的web頁面都是Node作為中間層，替換了php的渲染，中間自然有很多的困難要克服，但整體上來說開發的效率還是大大提升，不需要在配置php的環境，也不用在關心各種環境的依賴，整體上自己的一個獨立的服務，使用介面的形式和服務端通訊。

那麼三板斧為何會用到，主要是目前國內最常見的mobile的web頁面，基本在微信裡面流傳，然後這些頁面還需要一定的資料互動，而且這種頁面的特點就是短平快，不需要那麼嚴謹，這種頁面特別適合前端自己一擼到底，前後端通吃，接上 MongoDB當做資料庫，基本兩三天之內就能開發一個活動頁面出來，不需要對其他服務有任何依賴，包括微信授權都可以自己搞定，工作量其實比對接其他語言服務大不了多少，某些方面，我個人認為還減少了很多的溝通成本。

痛點– 造就了自己的一個開源

express的路由外掛

先說說這個外掛做什麼的：主要是自動的載入express框架下面的路由，免得一個一個路由需要手寫。

通常我們在express框架下面，寫路由的時候都是一個一個的手寫，然後在app.js裡面去一個一個引用，一般是這樣子的

那麼好一點的情況，是這樣子的，分散每一個相同名字的路由到檔案中，然後引用檔案在app.js裡面。

但實際上你可能在專案中路由情況是這樣子的

你有什麼想法？

雖然這樣子也就是一個檔案多兩行程式碼，我還是不爽，我為什麼要因為同一個規則而去多寫這兩個程式碼，而且10個兩行，就是20行，原則上，能用機器乾的事情，就不人幹，而且PHP的一些MVC框架可以自動載入路由，他們會有一個資料夾的分層，很明顯，路由都放到Controller資料夾下，然後根據路由名來匹配檔名的相應action，依據這個我自己就擼了一個express的自動載入路由，然後考慮了下一些特殊情況，做了點配置，不過目前只是支援一級目錄，沒有考慮多級目錄情況，有需要可以自己新增，或者給我提issues。