前端工程化

前段工程化能夠分紅四個塊來講，分別爲

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

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

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

  1. 一般，咱們會須要對頁面進行拆分，將其拆分紅一個一個的零件，而後分別去實現這一個個零件，最後再進行組裝。
  2. 在咱們的實際業務開發中，對於組件的拆分咱們須要作不一樣程度的考量，其中主要包括細粒度和通用性這兩塊的考慮。
  3. 對於業務組件，你更多須要考量的是針對你負責業務線的一個適用度，即你設計的業務組件是否成爲你當前業務的 「通用」 組件，好比我以前分析過的權限校驗組件，它就是一個典型的業務組件。感興趣的小夥伴能夠點擊 傳送門 自行閱讀。

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

  1. 項目目錄結構
  2. 編碼規範：對於編碼這塊的約束，通常咱們都會採用一些強制措施，好比 ESLint、StyleLint 等。
  3. 聯調規範：這塊可參考我之前知乎的回答，先後端分離，後臺返回的數據前端無法寫，怎麼辦？
  4. 文件命名規範
  5. 樣式管理規範：目前流行的樣式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
  6. git flow 工做流：其中包含分支命名規範、代碼合併規範等。
  7. 按期 code review
  8. … 等等

  以上這些，我以前也寫過一篇文章作過一些點的詳細說明，TypeScript + 大型項目實戰

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

而，處於其中任何一個塊都屬於前端工程化。