前端工程化思考與實踐（一）

 

1.         背景

 

UC資深前端工程師張雲龍曾在他的一篇博客中提出過一個觀點「前端，是一種GUI軟件」，複雜的Web應用前端界面工程量不亞於通常的傳統GUI軟件。這樣的定義在如今看來確實十分準確。

隨着前端開發的複雜化，前端代碼的管理，發佈，維護等等都成爲了避免可小視的問題。然而，目前國內的許多公司，在前端開發上還停留在很是原始的階段 —— 選一個看起來合適的框架，而後開始堆砌代碼。這樣的結果是，項目開發上線確實沒有問題，可是卻給後期的維護，更新，重構，代碼複用等等帶來的極大的不便，同時這也是一種十分低效的開發方式。

 

咱們項目自身遇到的一些前端問題：

u 代碼增量更新時，緩存處理問題。

u 頁面加載速度不如人意，急需優化。

u js代碼依賴複雜，各個模塊間耦合度太高，沒有徹底執行模塊化開發。

u 項目前端代碼沒有規範，可讀性較差。

u 頁面http請求過多

u 代碼書寫效率太低。

……

 

針對目前所發現的這些問題，我便有了嘗試前端工程化的打算，雖然在公司官網項目中我已經嘗試使用了接下來我將要提到的工具和方法，但目前在這個領域我也只是屬於基礎階段，還須要更多的學習。同時我也但願經過這個分享，拋磚引玉，可以讓你們更加劇視前端工程化，而且一塊兒完善這個方向的研究。

 

 張雲龍《前端工程——基礎篇》 ：https://github.com/fouber/blog/issues/10

 

 

2.         工具介紹

u Nodejs：

全部工具的基礎，前端工程化工具基於nodejs開發。

 

u Npm：

Nodejs的包管理工具，擁有大量的Nodejs庫，包括FIS3的庫，也是來自於這裏

 

u FIS3：

面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題。

 

u requireJS：

   RequireJS是一個JavaScript文件或者模塊的加載器，它是AMD"異步模塊定義"的一個實現。它能夠提升JavaScript文件的加載速度，避免沒必要要的堵塞。它針對於在瀏覽器環境中使用作過專門的優化，但它也能夠在其餘的JavaScript環境中使用，像Node.js同樣能夠在服務器上運行。

 

u r.js：

r.js是requireJS的優化（Optimizer）工具，能夠實現前端文件的壓縮與合併，在requireJS異步按需加載的基礎上進一步提供前端優化，減少前端文件大小、減小對服務器的文件請求。

此處使用r,js是爲了彌補FIS3對異步文件打包的問題。

 

u LESS（可選）：

LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用相似CSS的語法，爲CSS的賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。（還有如SASS、Stylus等預處理語言，咱們這裏選擇使用LESS）

 

 

3.         安裝

3.1    Nodejs 安裝：

WINDOWS版： http://nodejs.cn/前面Nodejs中文官方網站下載對應版本的msi文件直接安裝便可。安裝完成用在命令行中執行node –v查看到Nodejs版本號，表明安裝成功。

 

 

3.2    Npm安裝：

新版Nodejs中可能已經集成好了npm工具，全部咱們先在命令行執行npm –v查看是否安裝成功

 

安裝成功後，咱們要先配置npm的全局模塊的存放路徑以及cache的路徑，例如我但願將以上兩個文件夾放在NodeJS的主目錄下，便在NodeJs下創建"node_global"及"node_cache"兩個文件夾。

 

而後在命令行執行

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

並在環境變量裏系統變量PATH增長一條

C:\Program Files\nodejs\node_global

 

這裏咱們安裝Nodejs的express測試一下npm是否可使用

命令行執行

npm install express –g

　　

 

安裝成功後會顯示express的安裝路徑，已經express所依賴的包。

*npm install –g中-g表明全局安裝，不帶-g參數的時候會將包安裝到當前項目中

更多的參數選擇，和nodejs包，請前往https://www.npmjs.com/查看

另外由於國內網絡緣由，咱們有時候可能會連接不上處於國外的npm服務器，致使下載慢，或者失敗，這個時候咱們能夠考慮使用淘寶團隊給咱們提供的npm國內鏡像，

我目前還未使用過，就不過多介紹，具體使用能夠查看http://npm.taobao.org/

 

3.3       FIS3安裝：

在擁有Nodejs和npm以後咱們能夠很方便的安裝FIS3。

在命令行輸入

 

npm install -g fis3 

 

後將FIS3全局安裝到本地，注意這裏必須全局安裝，從此才能夠在命令行中使用fis3命令。安裝完成後咱們一樣檢查下是否成功

輸入

fis3 –v

 

看到這個以後表明安裝成功，若是安裝過程有問題，能夠前往github中的fis項目中查看解決方法或者提問

FIS3項目地址：https://github.com/fex-team/fis3

NPM 使用問題彙總：https://github.com/fex-team/fis/issues/565

 

3.4       RequireJS 和r.js：

直接前往http://www.requirejs.cn/docs/download.html 進行下載

 

 

3.5       LESS：

它並非一個工具，而是一個語言，所以咱們須要作的就是去學習它的語法，

http://lesscss.cn/ 有詳細的介紹。

在後面咱們會使用FIS3對它進行編譯而生成咱們熟悉的CSS文件。固然，若是你不想使用LESS或是熟悉其餘的CSS預處理語言，你徹底可使用它們來進行CSS代碼編寫，或者直接用CSS來編寫也是沒有問題的（不提倡，效率不高）。