本章主要介紹了解什么是前端工程化，以及介紹Node.js作為前端開(kāi)發(fā)工具&環(huán)境的使用；在目前前端開(kāi)發(fā)背景下，如果你對(duì)這兩者都沒(méi)有認(rèn)識(shí)，那你一定不是一名合格的前端開(kāi)發(fā)人員，甚至可以說(shuō)不是前端開(kāi)發(fā)工程師，所以，本章的內(nèi)容其實(shí)是比較重要的。

前端工程化

什么是前端工程化？去掉 前端，任何方向的編程開(kāi)發(fā)工程化都是軟件工程化，只有軟件開(kāi)發(fā)工程化了，我們才有架構(gòu)可言。前端開(kāi)發(fā)屬于軟件開(kāi)發(fā)，前端也是有前端架構(gòu)、前端工程化的。

前端工程化內(nèi)容主要有：前端規(guī)范化、模塊化、組件化、自動(dòng)化等。

本章主要做簡(jiǎn)單介紹，如果想關(guān)注更多，可以前往 前端團(tuán)隊(duì)工程化記錄 , 是個(gè)人在帶大前端團(tuán)隊(duì)過(guò)程中的一些實(shí)踐紀(jì)錄總結(jié)。

規(guī)范化

規(guī)范化包含開(kāi)發(fā)流程，文檔規(guī)范、開(kāi)發(fā)方式、代碼管理方式、編碼規(guī)范等內(nèi)容，如果一個(gè)大的項(xiàng)目工程沒(méi)有規(guī)范約束的話，這個(gè)項(xiàng)目的代碼管理和開(kāi)發(fā)流程方式都會(huì)比較亂，設(shè)計(jì)上也不會(huì)很好，開(kāi)發(fā)人員沒(méi)規(guī)范，隨便玩，代碼質(zhì)量也可能受到影響，最終造成的就是項(xiàng)目維護(hù)成本較高，開(kāi)發(fā)效率低等，動(dòng)不動(dòng)可能就重構(gòu)。

編碼規(guī)范，在前端的話主要是js編寫規(guī)范，比如目前流行用ES6、TypeScript編寫前端的話，對(duì)應(yīng)有 eslint 、tslint 工具，原生JavaScript編碼開(kāi)發(fā)也有jsLint，jsHint。這些工具可以限制編碼規(guī)范，規(guī)則都是可以自定義配置的，每個(gè)團(tuán)隊(duì)都有不同的規(guī)范要求，根據(jù)團(tuán)隊(duì)情況靈活調(diào)整規(guī)則限制即可。

同樣CSS也可以通過(guò)StyleLint等工具做好規(guī)范檢查。

其他規(guī)范，如文檔規(guī)范、開(kāi)發(fā)流程、項(xiàng)目目錄規(guī)范等就不一一舉例，因?yàn)檫@些沒(méi)有一個(gè)標(biāo)準(zhǔn)，只能是參考別人的，選擇適合自己的團(tuán)隊(duì)，進(jìn)而逐漸演變完善。

模塊化

(一)、AMD 與 CMD的模塊化規(guī)范

在Node.js未出現(xiàn)，CommonJS 規(guī)范未普及之前，有 RequireJS 和 SeaJS 兩種分別為 AMD 與 CMD 模塊規(guī)范的東西可以讓前端進(jìn)行模塊化開(kāi)發(fā)，和古老的前端開(kāi)發(fā)方式改變較大的就是，前

端新增的js文件不再需要一個(gè)個(gè)通過(guò) <script> 標(biāo)簽在頁(yè)面引入，而是可以通過(guò) require('../path/filename.js')的方式按需加載或者提前加載js，會(huì)根據(jù)文件路徑去匹配動(dòng)態(tài)加載js。

舉例：

目前很多兼容老版本IE的網(wǎng)站，未使用較新的前端UI庫(kù)、框架的網(wǎng)站，如果不使用ES6\TypeScript去開(kāi)發(fā)前端的話，基本還是一直用著類似以上這種模塊化規(guī)范去管理前端代碼。

(二)、Nodejs后普及的CommonJS規(guī)范

Node.js作為前端開(kāi)發(fā)環(huán)境或工具普及以后，以及Nodejs本身也都是用 CommonJS 規(guī)范去模塊化管理前端的。下邊是node.js里邊模塊化的舉例：

模塊module a：

模塊module b：去引入a.js，調(diào)用a里邊的方法

（三）、ES6后普及的ES6 Modules規(guī)范

ES6后，JavaScript支持 import 與 export 的方式對(duì)js模塊導(dǎo)入和js模塊導(dǎo)出。

了解更多，可以去學(xué)習(xí)阮一峰老師寫的ECMAScript 6 入門，文章中提到的 TypeScript 模塊化管理方式和 ES6 類似的。ts學(xué)習(xí)資源：TypeScript Handbook（中文版），初學(xué)者的學(xué)習(xí)順序：原生JavaScript——>ES6——>TypeScript，其中TypeScript看自己是否需要自選，但ES6應(yīng)該是作為前端必學(xué)的了，不然你趕不上前端工程化更好的浪潮。

組件化

組件化有大有小，也有根據(jù)業(yè)務(wù)和非業(yè)務(wù)組件分類，如果和業(yè)務(wù)無(wú)關(guān)，可能就是UI組件化（就是UI組件庫(kù)）；前端的組件庫(kù)很多，開(kāi)源的也很多，比如easyui、layui、BootStrap、ant-design、primeng、iView 等不計(jì)其數(shù)，這些UI都組件化，為了是更快地去開(kāi)發(fā)頁(yè)面，因?yàn)榍岸隧?yè)面開(kāi)發(fā)本身就存在很多重復(fù)的工作，這些重復(fù)的UI工作就可以提煉出來(lái)組件化，組件化多了，結(jié)合規(guī)范化，慢慢的就有了組件庫(kù)，就成了UI庫(kù)，組件庫(kù)其實(shí)還存在自動(dòng)化組件測(cè)試的部分。

WebGIS技術(shù)上的一些地圖框架，地圖JS庫(kù)也是組件化的成果，比如 OpenLayers、Leaflet等開(kāi)源地圖JS庫(kù)。

組件化是前端工程化必不可少的部分，也是前端高效開(kāi)發(fā)不可少的部分。

自動(dòng)化

自動(dòng)化的概念很廣，能做自動(dòng)化的方向也很多，目前已經(jīng)達(dá)到成熟程度的自動(dòng)化是組件自動(dòng)化測(cè)試，前端工程自動(dòng)化打包，自動(dòng)化構(gòu)建，自動(dòng)化部署，H5頁(yè)面編輯器。以及未來(lái)可能會(huì)成熟一些的AI自動(dòng)化頁(yè)面生成。

H5編輯器拖拽生成頁(yè)面的工具大家可能平時(shí)都有接觸到，比如易企秀、或者一些招聘H5，結(jié)婚請(qǐng)?zhí)鸋5頁(yè)面等，都已比較成熟。

自動(dòng)化構(gòu)建和持續(xù)集成，主要是開(kāi)發(fā)交付測(cè)試和測(cè)試后上線的流程，一般由運(yùn)維和開(kāi)發(fā)人員共同協(xié)作完成。具體流程為：開(kāi)發(fā)人員git提交代碼到測(cè)試分支，如果使用的是 Gitlab 的話，Jenkins 和 gitlab 可以實(shí)現(xiàn) DevOps 和 CI/CD 的集成，Jenkins 可以自動(dòng)拉取測(cè)試分支最新代碼，自動(dòng)構(gòu)建打包，自動(dòng)部署測(cè)試環(huán)境，成功和失敗都可以設(shè)置郵件通知等，測(cè)試人員就直接在測(cè)試環(huán)境進(jìn)行回歸測(cè)試，測(cè)試通過(guò)后，開(kāi)發(fā)人員將測(cè)試分支代碼合并到預(yù)生產(chǎn)分支，測(cè)試再次回歸測(cè)試，直到通過(guò)，上線生產(chǎn)環(huán)境也是這樣，都是自動(dòng)化的過(guò)程，并且代碼發(fā)布可以做到灰度發(fā)布，用戶無(wú)感知的程度。不再是傳統(tǒng)的人工打包代碼，手工部署等低效的操作。

自動(dòng)化是前端工程化不可缺少的部分，自動(dòng)化的最終目的就是，去掉那些重復(fù)簡(jiǎn)單的苦力活，讓程序來(lái)自動(dòng)把工作完成。

前端工程化總結(jié)

前端工程化本質(zhì)上還有很多內(nèi)容，建議大家網(wǎng)上找更多的資源去學(xué)習(xí)了解，本專欄的核心內(nèi)容不是這個(gè)，這里做大致的介紹了解，讓大家入門，有概念上的認(rèn)識(shí)后，接下來(lái)可能會(huì)更加輕松一些。需要強(qiáng)調(diào)的一點(diǎn)是，工程化是需要實(shí)踐出來(lái)的，而不是了解閱讀一下，單純知道就行了。

Node.js

什么是Node.js？

上邊也提到了Node.js，這里簡(jiǎn)單介紹一下Node.js的概念。Node.js是2009年 Ryan Dahl 開(kāi)發(fā)的一個(gè)JavaScript運(yùn)行環(huán)境，實(shí)際上是對(duì)Chrome V8引擎進(jìn)行了封裝，Node.js的出現(xiàn)，使得JavaScript可以運(yùn)行在服務(wù)端平臺(tái)，可以使用JavaScript來(lái)開(kāi)發(fā)后端。_這里不詳細(xì)介紹，本專欄主要使用Node.js作為前端開(kāi)發(fā)環(huán)境搭建工具，不涉及Node.js后端開(kāi)發(fā)內(nèi)容。

什么是NPM

NPM是隨同 Node.js 一起安裝的 包管理工具 ，能解決 Node.js 代碼部署上的問(wèn)題，常見(jiàn)的使用場(chǎng)景有以下幾種：

·允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。

·允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。

·允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。

http-server NPM模塊

http-server是個(gè)開(kāi)源的npm模塊，官方github倉(cāng)庫(kù)：https://github.com/indexzero/http-server

（1）、環(huán)境安裝

到node.js中文官網(wǎng)下載對(duì)應(yīng)系統(tǒng)版本的安裝包，安裝完成后（安裝過(guò)程不停下一步即可），打開(kāi)電腦的CMD命令窗口（windows下，WIN鍵+R后輸入CMD，然后回車），輸入node -v 來(lái)查看node.js安裝的版本，輸入 npm -v 查看npm的版本：

只要下載最新版本就行了。

（2）、安裝 http-server 為全局模塊

有了node.js環(huán)境后，我們可以使用 npm install [模塊名稱] 來(lái)安裝想安裝的模塊。

·npm install http-server -g

cmd命令窗口執(zhí)行上邊命令，其中 -g 表示全局安裝的意思。

安裝完成后，輸入 http-server -v 來(lái)檢測(cè)是否安裝成功。

安裝下載較慢同學(xué)可以切換淘寶鏡像后重新執(zhí)行安裝命令：

（3）、快速部署訪問(wèn)前端靜態(tài)頁(yè)面

很簡(jiǎn)單，我們只需要通過(guò)CMD來(lái)進(jìn)入到想部署訪問(wèn)的頁(yè)面文件夾下，輸入命令 http-server 即可部署成功，默認(rèn)端口為8080。也可以使用 http-server -p 端口 來(lái)指定不同端口，部署多個(gè)demo，成功后，訪問(wèn)提示的地址即可

json-server NPM模塊

Get a full fake REST API with zero coding in less than 30 seconds （0編碼30秒實(shí)現(xiàn)一個(gè)完整的REST API）

前端初學(xué)者或者是沒(méi)有后端經(jīng)驗(yàn)的前端開(kāi)發(fā)工程師，推薦熟悉了解一下json-server 模塊的使用，這個(gè)模塊可以幫助你去創(chuàng)建后端REST API接口，簡(jiǎn)單的說(shuō)就是增刪改查的接口，可以快速創(chuàng)建出來(lái)，模擬實(shí)現(xiàn)了后端，使得前端在寫demo的時(shí)候，需要一些接口請(qǐng)求，不需要再去寫后端，也不需要把數(shù)據(jù)寫死，讓前端開(kāi)發(fā)人員花更多的時(shí)間專注于解決前端開(kāi)發(fā)問(wèn)題。

（一）安裝

有node.js環(huán)境后，打開(kāi)CMD，執(zhí)行安裝模塊到全局

npm install -g json-server

（二）使用

新建個(gè)demo文件夾，里邊新建一個(gè)文件db.json （文件名可以隨意取），復(fù)制下邊json內(nèi)容到文件中保存

然后，在文件夾demo根目錄下，CMD執(zhí)行 json-server --watch db.json 即可

（持續(xù)更新中......）