一、什么是前端工程化
前端工程化是使用軟件工程的方法來解決前端的開發流程中模塊化、組件化、規范化、自動化的問題，其主要目的為了提高效率和降低成本。
二、為什么需要前端工程化？
Web業務日益復雜化和多元化，現在隨便找個前端項目，都已經不是過去的拼個頁面+搞幾個jQuery插件就能完成的了。代碼量可能從以前的千行到如今的萬行，甚至十萬行。人數從一個人變成了N個一起協作開發。所以在業務上，我們要去思考這些復雜和多元的場景，而產生的問題，如：
- 如何擴展javascript、html、css本身的語言能力
- 如何進行高效的多人協作
- 如何解決功能復用和變更問題
- 如何保證項目的規范性
- 如何實現重復的勞動簡單化
要實現前端工程化，就要解決以上的幾個問題。
三、如何實現前端工程化？
1.如何擴展javascript、html、css本身的語言能力？
（1）TypeScript
typeScript是javascript的超集，擴展了語法（類Classes，接口interfaces，模塊Modules,類型注解Type annotaions,編譯時類型檢查Compiletime type checking,Arrow函數(類似c#的Lambda))使得JavaScript變得更強大，對於面向對象編程更好的支持。
（2）CSS預處理器：SASS 、LESS、 Stylus。
它們基於CSS擴展了一套屬於自己的DSL（Domain Specific Language領域特定語言 ），來解決我們書寫CSS時難以解決的問題：
- 語法不夠強大，比如無法嵌套書寫導致模塊化開發中需要書寫很多重復的選擇器；
- 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。
所以這就決定了CSS預處理器的主要目標：提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。
2.如何進行高效的多人協作
模塊化
簡單來說，模塊化就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和加載。只有這樣，才有多人協作的可能。
JS的模塊化
瀏覽器端模塊化的問題：
- 效率問題：精細的模塊划分帶來了更多的JS文件，更多的JS文件帶來了更多的請求，降低了頁面訪問效率
- 兼容性問題：瀏覽器目前僅支持ES6的模塊化標准，並且還存在兼容性問題
- 工具問題：瀏覽器不支持npm下載的第三方包
在ES6之前，JavaScript一直沒有模塊系統，這對開發大型復雜的前端工程造成了巨大的障礙。對此社區制定了一些模塊加載方案，如CommonJS、AMD和CMD等，某些框架也會有自己模塊系統，比如Angular1.x。現在ES6已經在語言層面上規定了模塊系統，完全可以取代現有的CommonJS和AMD規范，而且使用起來相當簡潔，並且有靜態加載的特性。
規范確定了，然后就是模塊的打包和加載問題：
- 用Webpack+Babel將所有模塊打包成一個文件同步加載，也可以打成多個chunk異步加載；
- 用SystemJS+Babel主要是分模塊異步加載；
- 用瀏覽器的<script type="module">加載
目前Webpack遠比SystemJS流行。Safari已經支持用type="module"加載了。
CSS的模塊化
（1）類名沖突
當你寫一個css類的時候，你是寫全局的類呢，還是寫多個層級選擇后的類呢？
你會發現，怎么都不好
- 過深的層級不利於編寫、閱讀、壓縮、復用
- 過淺的層級容易導致類名沖突
一旦樣式多起來，這個問題就會變得越發嚴重，其實歸根結底，就是類名沖突不好解決的問題
解決類名沖突
一些第三方機構提出了一些方案來解決該問題，常見的解決方案如下：
命名約定：即提供一種命名的標准，來解決沖突，常見的標准有：
- BEM
- OOCSS
- AMCSS
- SMACSS
- 其他
（2）重復樣式
這種問題就更普遍了，一些重復的樣式值總是不斷的出現在css代碼中，維護起來極其困難。
比如一個網站的主題顏色改變，這些顏色會充斥到背景、文字、邊框中，一旦顏色調整，就是一個非常大的工程。
解決重復樣式的問題：
- css in js
這種方案雖然可以利用js語言解決重復樣式值的問題，但由於太過激進，很多習慣寫css的開發者編寫起來並不是很適應
它的核心思想是：用一個JS對象來描述樣式，而不是css樣式表，至於如何把樣式應用到界面上，不是它所關心的事情，你可以用任何技術、任何框架、任何方式將它應用到界面。
- 預編譯器
有些第三方搞出一套css語言的進化版來解決這個問題，它支持變量、函數等高級語法，然后經過編譯器將其編譯成為正常的css
這種方案特別像構建工具，不過它僅針對css
常見的預編譯器支持的語言有：
- less
- sass
（3）css文件細分
在大型項目中，css也需要更細的拆分，這樣有利於css代碼的維護。
不同的功能依賴不同的css樣式、公共樣式可以單獨抽離，這樣就形成了不同於過去的css文件結構：文件更多、拆分的更細
而同時，在真實的運行環境下，我們也希望文件越少越好，這種情況和JS遇到的情況是一致的，因此，對於css，也需要工程化管理。
解決css文件細分問題
這一部分，就要依靠構建工具，例如webpack來解決了：利用一些loader或plugin來打包、合並、壓縮css文件
3.如何解決功能復用和性能問題
為了解決復用問題，引入組件化的概念。何以提高代碼的復用性。
組件化
首先，組件化≠模塊化。好多人對這兩個概念有些混淆。
模塊化只是在文件層面上，對代碼或資源的拆分；
而組件化是在設計層面上，對UI（用戶界面）的拆分。從UI拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之為組件。
其實，組件化更重要的是一種分治思想。頁面上所有的東西都是組件。頁面是個大型組件，可以拆成若干個中型組件，然后中型組件還可以再拆，拆成若干個小型組件，小型組件也可以再拆，直到拆成DOM元素為止。DOM元素可以看成是瀏覽器自身的組件，作為組件的基本單元。
4.如何保證項目的規范性
模塊化和組件化確定了開發模型，而這些東西的實現就需要規范去落實。
規范化其實是工程化中很重要的一個部分，項目初期規范制定的好壞會直接影響到后期的開發質量。
比如：
- 目錄結構的制定
- 編碼規范（eslint）
- 前后端接口規范（swagger）
- 文檔規范（ js注釋規范jsdoc）
- 組件管理
- Git分支管理
- Commit描述規范（commitlint)
- 定期CodeReview
- 視覺圖標規范
5.如何實現重復的勞動簡單化
為什么要借助自動化工具呢？
用網上比較流行的話來說就是，前端工程化的很多臟活累活都應該交給自動化工具來完成。現在比較流行的前端自動化構建工具有gulp、webpack、vite
在之后的章節會詳細講解webpack的基本使用和構建原理，敬請期待~