一路高歌的前端工程化

本文原創：weishanshancss

這是一個最好的時代，也是一個最壞的時代；這是一個智慧的年代，這是一個愚蠢的年代；這是一個信任的時期，這是一個懷疑的時期。
這是一個光明的季節，這是一個黑暗的季節；這是但願之春，這是失望之冬；人們面前應有盡有，人們面前一無全部；人們正踏上天堂之路，人們正走向地獄之門。
-- 查爾斯·狄更斯《雙城記》 html

現現在早已不是那個僅憑着HTML、JavaScript、CSS就能仗劍走天下的時代了，日益複雜的web應用，動輒數十人的共同開發，層出不窮的前端技術棧，一步步推進前端工程化的加深。前端

前端工程化說到底就是以一切能提質、提效的手段或是工具創建起來的一套完整的前端體系。固然這套體系並無絕對的標準，畢竟適合本身團隊的纔是最好的。vue

接下來主要介紹下目前階段咱們團隊的前端工程化實踐。react

首先咱們應該知道前端開發必不可少的三個階段。webpack

需求準備 -> 開發實現 -> 部署上線
複製代碼

廢話很少說，先上一張系統架構圖鎮樓。git

對此圖有任何疑問的，請聯繫做者，在此不作具體介紹說明。web

簡單來講，前端工程化最主要的三個特性就是複用性、規範性和自動性。vuex

複用性

複用性最明顯的表現形式就是模塊化和組件化。前端工程化

名稱	注重點	目的
模塊化	偏重代碼邏輯的區分	複用、解耦
組件化	偏重UI界面角度的區分	隔離、封裝

規範性

規範性指的是爲了保證代碼質量，減小個體差別及後期維護成本，提高協做開發效率而制定的一系列準則。

1.git-flow規範

lables：標籤提供了一種簡單的方法來對問題進行分類，或者基於描述性的標題（如bug、feature、文檔或任何其餘文本）。它們能夠有不一樣的顏色，描述，在整個問題跟蹤器中均可以看到。
milestones：里程碑是跟蹤實現這一目標進程發展的寶貴工具。從里程碑，您能夠查看問題的狀態，合併請求，貢獻者以及每一個標籤的已打開和已關閉的問題。
issues：建立Issue->添加Labels->指定Milestone->拆分需求
branch：每當有新需求時從master分支checkout出一個需求分支，分支命名規則p_#id 注：id爲該需求所建立的issue id。
commit：加標籤及關聯issue。 如git commit -m [type][#id] 註釋信息（type爲標籤類型，如feature、bugfix等）
codereview：建立mergeRequest並assign給code reviewer
複製代碼

2.項目結構規範

目錄結構說明：
.cz-chanelog:  git commit時的提交格式
build文件夾：項目打包配置
mock文件夾：使用mockjs的mock的數據存放處
src ：
    assets：圖片、樣式等統一存放處
    components：公共組件存放處
    directives：若是項目中添加指令的話，統一存放處
    filters：過濾器內容的統一存放處
    mixins：vue裏的混合機制--mixins
    store：vuex
    utils：公共方法存放處
    views：vue頁面
    app.vue：統一入口文件
    index.html：模板文件
    index.js：掛載
    routes.js：路由配置文件
複製代碼

3.設計規範

4.接口規範

5.編碼規範

JS 編碼規範->ESlint規範、CSS編碼規範、圖片規範等等
複製代碼

6.單測規範

7.CodeReview規範

代碼規範類、語法使用類等等
複製代碼

自動性

任何簡單機械的重複勞動都應該讓機器去完成。

1.項目搭建階段

一鍵式的項目搭建腳手架。（支持vue/react+webpack，SSR模板， TS模板，mock等）
複製代碼

2.構建階段

代碼轉譯：即預編譯，指高階js語法ES6+、TS等的自動轉換；less/sass語法自動編譯成css等；
性能優化：
    模塊合併：分析依賴文件，將同步依賴的代碼打包合併。
    文件壓縮：減小文件大小，經常使用的有代碼壓縮和Code Splitting。
    chunkhash指紋：解決瀏覽器緩存引發的靜態資源更新問題及文件緩存所有失效問題。
    happypack多線程打包等
文件監聽：瀏覽器的自動刷新等；
複製代碼

3.commit階段

代碼巡檢：自動化檢查及規範代碼；
單元測試：自動化運行單測用例，保證功能的可靠性。
複製代碼

4.部署階段

項目部署：一鍵式部署平臺。（機器的自動分配、項目的一鍵式部署。）
複製代碼

總的來講，前端工程化體現的是一種思想。任何的架構、任何的策略，都只是針對目前的一種工程化實踐。隨着時代的發展、技術框架的日趨成熟，前端工程化也必將滲透更深。

針對本文內容，若是有任何疑問的，請聯繫做者。