工程化

前端工程化可以分成四個方面來說，分別為模塊化、組件化、規范化和自動化。

模塊化

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

• 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。這些自動化工具在自動化合並、構建、打包都能為我們節省很多工作。而這些只是前端自動化其中的一部分，前端自動化還包含了持續集成、自動化測試等方方面面。