開篇：到底什麼是前端工程化？

前端工程化是現代前端的必備技能

Web 前端這幾年進化速度之快讓人咂舌。很多前端工程師都不禁吐槽“學不動了”。如今已經不是 HTML、CSS、JS 前端三劍客仗劍走天下的時代了。

以筆者的親身經曆舉例。筆者在 2011 年左右進入前端這個行業。當時工作的主要内容是，将設計稿切圖轉成靜态頁面，然後用 jQuery 插件實作一些頁面的輪播圖、跑馬燈等互動效果。最後使用後端的模闆語言如 smart、velocity 等将靜态頁面添加頁面邏輯，代碼交給服務端同學完成上線。整個過程中，JS 架構以 jQuery 為主，CSS 頂多用一下 Less。

再來看一下如今的前端工作方式，以筆者所在的快狗打車前端團隊為例進行說明。前端的開發架構以 Vue 為主，使用 Webpack 解決接口 mock、代碼檢查、代碼編譯、建構、壓縮、添加版本号、部署等全流程的工作。涉及到的技術點有 Vue、Vuex、ESlint、stylelint、mock、Webpack、Sass、PostCSS 等。對前端的要求相比幾年前已經從單純的 JS、CSS 問題變成了更多工程化為主的問題。

前端工程化是一個很大的話題，甚至到現在都沒有一個準确的定義。筆者對前端工程化的了解是：一切能提升前端開發效率，提高前端應用品質的手段和工具都是前端工程化。

在前端領域越來越繁榮，越來越複雜的今天，學習前端工程化又能給我們帶來哪些好處呢？

極大提升開發效率

前端工程化的演進可以極大地提升開發效率。前端發展到現在，社群湧現出大量的優秀架構和工具，得以将前端工程師從繁重的工作中解脫出來。

舉個例子，同樣地給一個 dom 元素綁定一個 click 事件，使用純 JS 可能這樣做：

document.getElementById('myDom').addEventListener('click', function(e){
    // do some thing
})
           

我們引入 jQuery 的情況下，就簡單了許多：

$('#myDom').click(function(){
    // do some thing
})
           

如果在 Vue 中，既簡單又清晰：

<div @click="doSomething">
</div>

// ...
methods: {
  doSomething: function () {
    // do some thing
  }
}
           

如果有大量的事件綁定，沒有開發工具的支撐，将有大量重複的代碼需要寫，想想就頭疼。效率之低下可見一斑。

為了減少請求數，前端開發者通常會把大量尺寸較小、細碎的小圖檔合并成一張大的透明的雪碧圖，在 CSS 中通過設定元素的 background-position 來使用圖檔。如果是完全手動去拼圖、測距，将耗費大量的時間。但在雪碧圖插件 webpack-spriteSmith 的幫助下，小圖可以自動拼成雪碧圖，并生成對應的 CSS 樣式，插件能幫助我們處理這種毫無技術含量的體力活，效率加倍。

再舉一個例子，沒有前端腳手架的情況下，如果從零開發一個項目，需要花費大量的時間去初始化項目，比如安裝各種 npm 包、配置各種 Webpack 的 loader、配置熱加載。如果碰到環境搭建不順利的情況，還需要花費很長時間去排查問題，單單一個項目初始化的動作就足以耗費一兩天的時間。有腳手架工具的情況下，隻需要簡單的一個初始化指令，2 分鐘的時間就可以完成項目的初始化。前端隻需要聚焦到業務開發本身，效率大幅提升。

降低大型項目的開發難度

首先前端工程化中提倡子產品化、元件化。子產品化的思想将大型項目的功能進行分解，分拆成一個個獨立的子產品。每個子產品的開發難度直線下降。同時基于版本控制工具 Git，多個開發者可以并行開發，提升開發效率。項目在後期疊代的時候，由于每個子產品相對獨立，耦合性極低，一個功能的調整往往隻需要修改其中的一個子產品就可以，風險可控。不至于出現改動一處代碼，引發全局問題的情況。

其次，前端工程化提倡用完善的流程規範和代碼規範來保證大型應用的品質和可維護性。比如通過 ESlint、stylelint 對代碼進行自動校驗，通過評審、詳細設計、開發、聯調、測試、上線等每個環節的控制，確定項目的高品質和按時傳遞。向主分支合并代碼必須經過 code review。流程規範確定了大型項目品質和可維護性的同時能夠如期傳遞。

更易獲得面試官青睐

依稀記得六七年前去面試，遇到面試題大概是這種風格：“如何實作水準垂直居中”，“js 事件委托的原理是什麼”，“常見的 css hack 方式有什麼？”，“\$(function(){})與 window.onload 有什麼差別？”

今天面試遇到的面試題大概是這種風格：“能講下 Vue 實作雙向資料綁定的原理嗎？”，“Webpack 中如何配置 Babel？”，“promise 和 await/async 的差別是什麼？”

如果想進入大公司工作，前端工程化更是需要具備的基本素質。大公司的業務往往非常複雜，而且對穩定性的要求極高。與之相對應的前端工程化程度很高，各種配套的基礎建設很成熟。比如美團點評體系化的工程化方案、移動元件庫 Vix、自動化測試工具 Freekite、Hybrid 功能體驗的解決方案 Titans 等。想得到這些公司的青睐，候選人需要在前端工程化領域有較深的積累。

前端的崗位技能已經發生深刻的變化。有人甚至戲言成前端工程師為前端配置工程師。

fouber（張雲龍）曾經在自己的博文中說：

"前端是一種技術問題較少、工程問題較多的軟體開發領域。”

是以前端工程化是每個現代前端人應該必備的技能。

課程适用人群

國中級前端工程師

對于初級中級前端工程師來說，由于工作經驗較少，技術的寬度和廣度都不足，對前端工程化的認知其實也是不夠的，一上來整體掌握前端工程化肯定是有困難的。對于這部分同學來講，首要的事情要學會去"用”，循序漸進地去了解其中的原理。例如在開發之餘，自己學一學如何實作一個簡單的腳手架工具，了解一下日常開發必備的腳手架是如何實作的，以點帶面地學習裡面用到的技術點。

期望晉升的前端工程師

前端工程化能力也是一個資深前端的必備技能。工作好多年了，如果連前端工程化都知之甚少，甚至連一個基本的腳手架都不能自己搭建，這是不及格的。如果将來帶團隊，怎麼能指導團隊同學，怎麼能帶領團隊進步呢？如果去參加公司的晉升，也是沒有說服力的。因為想要晉升高 T，必然需要在效率和性能優化等方面有深厚的積累和貢獻。

是以，無論你是處在什麼階段，深入了解一下前端工程化都是極有必要的。

課程介紹

前端應用越來越複雜，對前端工程化的要求越來越高。腳手架作為目前前端工程化的一個重要的組成部分，在開發過程中扮演了至關重要的角色。現在幾乎所有主流前端幾架構都有自己配套的腳手架，無疑給開發者帶來了極大的便利。但正如上文所述，很多開發者由于本身入行較短，或者很多工作多年的開發者由于公司業務的原因，沒有機會接觸到前端工程化領域。

不了解沒有關系，重要的是大家看到這篇教程，說明已經意識到前端工程化的重要性了，這就不晚。

本課程以 Vue 為例，結合筆者在團隊中的工程化實踐，帶領大家從零開始搭建一個腳手架，将搭建腳手架用到的技術點逐一拆解，希望大家看完後，每個人都對腳手架和工程化思想有個較深入地了解。

點選了解《透視前端工程化》。

課程特色

• 知識具有系統性。從流程規範、開發、聯調、測試、建構、部署各個環節系統地講解搭建一個腳手架所用到的前端知識。
• 實用性很強。課程源于筆者所在團隊的工程化實踐，實用性很強，做完教程後可以直接應用到業務開發中。

能學到什麼

相信在學完本課程後，大家至少有以下幾點收獲：

• 對前端工程化有一個系統認知；
• 能獨立設計一套前端工程化解決方案；
• 知識廣度上有大幅提升；
• 進入更好的平台，獲得更好的薪酬。

課程組成

• 第一部分 模闆設計（1～16 課）。該章節的篇幅基本占到了整個教程 90%。主要涉及 Webpack 基礎知識的講解，如何配置 Webpack 以支援子產品化開發、如何配置 Webpack 以支援前後端的并行開發、如何配置 webpack 以支援代碼的檢查、如何配置 Webpack 以支援單元測試和 e2e 測試，如何配置前端本地開發環境、如何配置前端資源的部署功能等。模闆設計涉及到開發流程、代碼規範、性能優化等工程化的方方面面，知識點很多，大家需要重點學習。
• 第二部分 指令行設計（17～18 課）。該章節主要是講解如何開發一個 node 的指令行工具。如何将指令行工具與模闆進行結合，幫助開發者快速建立項目模闆。

點選了解《透視前端工程化》。

課程寄語

希望讀者學完本課程後，能了解腳手架背後蘊藏的工程化思想，并且可以親手完成一個腳手架的搭建。也希望大家在了解了前端工程化思想後，探索更多的方法，賦能自己的團隊，共同推動前端工程化的發展。