一、什么是前端工程化
前端工程化是使用軟體工程的方法來解決前端的開發流程中模塊化、組件化、規范化、自動化的問題，其主要目的為了提高效率和降低成本，
二、為什么需要前端工程化？
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.如何實作重復的勞動簡單化
為什么要借助自動化工具呢？
在瀏覽器端，開發時態（devtime）和運行時態（runtime）的側重點不一樣
開發時態，devtime：
1. 模塊劃分越細越好 2. 支持多種模塊化標準 3. 支持npm或其他包管理器下載的模塊 4. 能夠解決其他工程化的問題（模塊化、組件化、規范化）
運行時態，runtime：
1. 檔案越少越好 2. 檔案體積越小越好 3. 代碼內容越亂越好 4. 所有瀏覽器都要兼容 5. 能夠解決其他運行時的問題，主要是執行效率問題
這種差異在小專案中表現的并不明顯，可是一旦專案形成規模，就越來越明顯，如果不解決這些問題，前端專案形成規模只能是空談
解決辦法
既然開發時態和運行時態面臨的局面有巨大的差異，因此，我們需要有一個工具，這個工具能夠讓開發者專心的在開發時態寫代碼，然后利用這個工具將開發時態撰寫的代碼轉換為運行時態需要的東西，
這樣的工具，叫做自動化構建工具
用網上比較流行的話來說就是，前端工程化的很多臟活累活都應該交給自動化工具來完成，現在比較流行的前端自動化構建工具有gulp、webpack、vite
在之后的章節會詳細講解webpack的基本使用和構建原理，敬請期待~
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/296400.html
標籤：其他
上一篇：2021年度軟體開發狀態報告