如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境（三）
往期回顧
前面2期都講得是瀏覽器端的東西比較多，包括Webpack，雖然是Node處理的，但是還是瀏覽器端用的多，對(duì)于現(xiàn)在的前端開發(fā)來(lái)說(shuō)，不懂一點(diǎn)服務(wù)端的東西，簡(jiǎn)直沒(méi)辦法活，一般的招聘要求都會(huì)加上要懂一門服務(wù)端的語(yǔ)言，例如：PHP，Java之類的啦。如圖所示：
所以我們這期就講Node的東西。
程咬金的三板斧
一、劈腦袋 -- 工具鏈
Node在前端領(lǐng)域使用最為廣泛的就是工具鏈了，一期提到的構(gòu)建工具都是Node寫的，當(dāng)然還有其他很多工具，比如：京東工程化，百度開源構(gòu)建工具FIS3，微信發(fā)布的工作流工具等等一系列前端工具都是用Node寫的。廣泛的說(shuō)，我認(rèn)為一期提到的編輯器也算工具鏈的中的一種，Atom，vs code，Brackets都和Node密不可分。我個(gè)人感覺(jué)，Node的發(fā)展，實(shí)際上大大解放了前端的生產(chǎn)力，對(duì)于其他的服務(wù)端語(yǔ)言的依賴基本可以說(shuō)降到***，可以依據(jù)自己的需要編寫工具來(lái)完成技術(shù)目標(biāo)。
這方面大家也可以自己來(lái)產(chǎn)出下，例如我自己寫了個(gè)小工具供自己使用：
vuejs 格式化 Atom插件
現(xiàn)在下載量也不錯(cuò)，有2000多了，還有好幾個(gè)issues沒(méi)有處理，哭!!
二、鬼剔牙 -- 中間層
對(duì)于很多FE來(lái)說(shuō)，要搭建一個(gè)后端環(huán)境很是麻煩，而且不熟悉，容易出錯(cuò)(java，ruby，php)，最糟的是自己不懂，出錯(cuò)了完全不會(huì)調(diào)試，你的表情此時(shí)是這樣的：
那么在13、14年的時(shí)候，淘寶的前端團(tuán)隊(duì)，開始連續(xù)發(fā)文，前后端分離的思考和實(shí)踐系列文章，提到了中途島計(jì)劃，也就是把Node作為前端和服務(wù)端的中間層，也就是這個(gè)架構(gòu)，
從這種圖，不難看出，Node取代原來(lái)php，java干的一部分事情，也就是我們常說(shuō)的MVC框架中的VC基本都給Node來(lái)干，F(xiàn)E干的事情更多了，能掌握的東西多了，意味著對(duì)于自己更加靈活，可以考慮更多的組件化，工程化，性能監(jiān)控，數(shù)據(jù)分析的事情。
這方面的實(shí)踐大家可以參考美團(tuán)這邊的圖文：
三、掏耳朵 -- 火熱的全棧
Full Stack developer 是近年來(lái)熱炒的一個(gè)概念，究其原因，跟Node的火熱不無(wú)關(guān)系，早些年講，一個(gè)人(大牛不算普通人)既要精通java又要精通js，html，css還是很困難，很多思維都不太一樣，分開也很正常，而Node的出現(xiàn)，為很多比較厲害的前端提供了切入到服務(wù)端的機(jī)會(huì)，語(yǔ)言層面的問(wèn)題不在是難點(diǎn)，重要的對(duì)服務(wù)端的知識(shí)點(diǎn)的熟悉程度。Node的***一個(gè)大招就是替換一些傳統(tǒng)的服務(wù)端語(yǔ)言，例如php，ruby，java等，在業(yè)務(wù)層上面使用Node來(lái)開發(fā)服務(wù)端完全不成問(wèn)題。
例如： uber的調(diào)度系統(tǒng)幾乎都是用 node.js 編寫的
這方面的文章也有很多了，大家可以自己去搜搜看，包括各種框架，還有各種開源系統(tǒng)，都可以找到。當(dāng)然也還有各種各樣的坑和問(wèn)題以待大家去踩和解決。
說(shuō)說(shuō)自家事
我們公司來(lái)說(shuō)的話，三板斧基本都用上了，打包構(gòu)建自不用談，基本每個(gè)前端都會(huì)用到，第二板斧我們公司已經(jīng)基本切換過(guò)來(lái)了，年后3月啟動(dòng)，目前是所有的web頁(yè)面都是Node作為中間層，替換了php的渲染，中間自然有很多的困難要克服，但整體上來(lái)說(shuō)開發(fā)的效率還是大大提升，不需要在配置php的環(huán)境，也不用在關(guān)心各種環(huán)境的依賴，整體上自己的一個(gè)獨(dú)立的服務(wù)，使用接口的形式和服務(wù)端通信。
那么三板斧為何會(huì)用到，主要是目前國(guó)內(nèi)最常見的mobile的web頁(yè)面，基本在微信里面流傳，然后這些頁(yè)面還需要一定的數(shù)據(jù)交互，而且這種頁(yè)面的特點(diǎn)就是短平快，不需要那么嚴(yán)謹(jǐn)，這種頁(yè)面特別適合前端自己一擼到底，前后端通吃，接上 MongoDB當(dāng)做數(shù)據(jù)庫(kù)，基本兩三天之內(nèi)就能開發(fā)一個(gè)活動(dòng)頁(yè)面出來(lái)，不需要對(duì)其他服務(wù)有任何依賴，包括微信授權(quán)都可以自己搞定，工作量其實(shí)比對(duì)接其他語(yǔ)言服務(wù)大不了多少，某些方面，我個(gè)人認(rèn)為還減少了很多的溝通成本。
痛點(diǎn)-- 造就了自己的一個(gè)開源
先說(shuō)說(shuō)這個(gè)插件做什么的： 主要是自動(dòng)的加載express框架下面的路由，免得一個(gè)一個(gè)路由需要手寫。
通常我們?cè)趀xpress框架下面，寫路由的時(shí)候都是一個(gè)一個(gè)的手寫，然后在app.js里面去一個(gè)一個(gè)引用，一般是這樣子的
那么好一點(diǎn)的情況，是這樣子的，分散每一個(gè)相同名字的路由到文件中，然后引用文件在app.js里面。
但實(shí)際上你可能在項(xiàng)目中路由情況是這樣子的
你有什么想法?
雖然這樣子也就是一個(gè)文件多兩行代碼，我還是不爽，我為什么要因?yàn)橥粋€(gè)規(guī)則而去多寫這兩個(gè)代碼，而且10個(gè)兩行，就是20行，原則上，能用機(jī)器干的事情，就不人干，而且PHP的一些MVC框架可以自動(dòng)加載路由，他們會(huì)有一個(gè)文件夾的分層，很明顯，路由都放到Controller文件夾下，然后根據(jù)路由名來(lái)匹配文件名的相應(yīng)action，依據(jù)這個(gè)我自己就擼了一個(gè)express的自動(dòng)加載路由，然后考慮了下一些特殊情況，做了點(diǎn)配置，不過(guò)目前只是支持一級(jí)目錄，沒(méi)有考慮多級(jí)目錄情況，有需要可以自己添加，或者給我提issues。
照例總結(jié)
本篇文章主要講的是關(guān)于Node的東東，它的使用方向，更偏向結(jié)合前端的使用，并非是很深入的Node原理，也算是給很多前端解惑下，為什么要使用Node，以及如何使用Node，不要盲目的聽信別人的建議，需要結(jié)合自己項(xiàng)目情況，技術(shù)水平，以及團(tuán)隊(duì)配比。
更多的Node的使用細(xì)節(jié)和技巧建議關(guān)注：
下一篇我們開啟如何結(jié)合Webpack和express 搭建一個(gè)開發(fā)環(huán)境和項(xiàng)目目錄
