前端工程化概述

摘要

前端工程化能夠分紅四個方面來講，分別爲模塊化、組件化、規範化和自動化。

模塊化

模塊化是指將一個文件拆分紅多個相互依賴的文件，最後進行統一的打包和加載，這樣可以很好的保證高效的多人協做。其中包含

• JS 模塊化：CommonJS、AMD、CMD 以及 ES6 Module。
• CSS 模塊化：Sass、Less、Stylus、BEM、CSS Modules 等。其中預處理器和 BEM 都會有的一個問題就是樣式覆蓋。而 CSS Modules 則是經過 JS 來管理依賴，最大化的結合了 JS 模塊化和 CSS 生態，好比 Vue 中的 style scoped。
• 資源模塊化：任何資源都能以模塊的形式進行加載，目前大部分項目中的文件、CSS、圖片等都能直接經過 JS 作統一的依賴關係處理。

組件化

不一樣於模塊化，模塊化是對文件、對代碼和資源拆分，而組件化則是對 UI 層面的拆分。

一般，咱們會須要對頁面進行拆分，將其拆分紅一個一個的零件，而後分別去實現這一個個零件，最後再進行組裝。 在咱們的實際業務開發中，對於組件的拆分咱們須要作不一樣程度的考量，其中主要包括細粒度和通用性這兩塊的考慮。 對於業務組件，你更多須要考量的是針對你負責業務線的一個適用度，即你設計的業務組件是否成爲你當前業務的 「通用」 組件。

規範化

正所謂無規矩不成方圓，一些好的規範則能很好的幫助咱們對項目進行良好的開發管理。規範化指的是咱們在工程開發初期以及開發期間制定的系列規範，其中又包含了

• 項目目錄結構
• 編碼規範：對於編碼這塊的約束，通常咱們都會採用一些強制措施，好比 ESLint、StyleLint 等。
• 聯調規範
• 文件命名規範
• 樣式管理規範：目前流行的樣式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
• git flow 工做流：其中包含分支命名規範、代碼合併規範等。
• 按期 code review … 等等

自動化

從最先先的 grunt、gulp 等，再到目前的 webpack、parcel。這些自動化工具在自動化合並、構建、打包都能爲咱們節省不少工做。而這些只是前端自動化其中的一部分，前端自動化還包含了持續集成、自動化測試等方方面面。