AST 與前端工程化實戰
https://juejin.im/post/5d50d1d9f265da03aa25607b
前段工程化可以分成四個塊來說，分別為：
1.模組化：將一個檔拆分成多個相互依賴的檔，最後進行統一的打包和載入，這樣能夠很好的保證高效的多人協作。其中包含：
A.JS 模組化：CommonJS、AMD、CMD 以及 ES6 Module。
B.CSS 模組化：Sass、Less、Stylus、BEM、CSS Modules 等。其中前置處理器和 BEM 都會有的一個問題就是樣式覆蓋。而 CSS Modules 則是通過 JS 來管理依賴，最大化的結合了 JS 模組化和 C.CSS 生態，比如 Vue 中的 style scoped。
資源模組化：任何資源都能以模組的形式進行載入，目前大部分項目中的檔、CSS、圖片等都能直接通過 JS 做統一的依賴關係處理。
2.組件化：不同於模組化，模組化是對檔、對代碼和資源拆分，而組件化則是對 UI 層面的拆分。
A.通常我們會需要對頁面進行拆分，將其拆分成一個一個的零件，然後分別去實現這一個個零件，最後再進行組裝。
B.在我們的實際業務開發中，對於元件的拆分我們需要做不同程度的考量，其中主要包括細細微性和通用性這兩塊的考慮。
C.對於業務元件，你更多需要考量的是針對你負責業務線的一個適用度，即你設計的業務元件是否成為你當前業務的 “通用” 元件，比如我之前分析過的許可權校驗元件，它就是一個典型的業務元件。感興趣的小夥伴可以點擊 傳送門 自行閱讀。
3.規範化：正所謂無規矩不成方圓，一些好的規範則能很好的説明我們對專案進行良好的開發管理。規範化指的是我們在工程開發初期以及開發期間制定的系列規範，其中又包含了
A.專案目錄結構
B.編碼規範：對於編碼這塊的約束，一般我們都會採用一些強制措施，比如 ESLint、StyleLint 等。
C.聯調規範：這塊可參考我以前知乎的回答，前後端分離，後臺返回的資料前端沒法寫，怎麼辦？
D.檔命名規範
E.樣式管理規範：目前流行的樣式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
F.git flow 工作流：其中包含分支命名規範、代碼合併規範等。
G.定期 code review
4.自動化：從最早先的 grunt、gulp 等，再到目前的 webpack、parcel。這些自動化工具在自動化合並、構建、打包都能為我們節省很多工作。而這些前端自動化其中的一部分，前端自動化還包含了持續集成、自動化測試等方方面面。
#AST, frontend, 前端, 工程化
https://juejin.im/post/5d50d1d9f265da03aa25607b
前段工程化可以分成四個塊來說，分別為：
1.模組化：將一個檔拆分成多個相互依賴的檔，最後進行統一的打包和載入，這樣能夠很好的保證高效的多人協作。其中包含：
A.JS 模組化：CommonJS、AMD、CMD 以及 ES6 Module。
B.CSS 模組化：Sass、Less、Stylus、BEM、CSS Modules 等。其中前置處理器和 BEM 都會有的一個問題就是樣式覆蓋。而 CSS Modules 則是通過 JS 來管理依賴，最大化的結合了 JS 模組化和 C.CSS 生態，比如 Vue 中的 style scoped。
資源模組化：任何資源都能以模組的形式進行載入，目前大部分項目中的檔、CSS、圖片等都能直接通過 JS 做統一的依賴關係處理。
2.組件化：不同於模組化，模組化是對檔、對代碼和資源拆分，而組件化則是對 UI 層面的拆分。
A.通常我們會需要對頁面進行拆分，將其拆分成一個一個的零件，然後分別去實現這一個個零件，最後再進行組裝。
B.在我們的實際業務開發中，對於元件的拆分我們需要做不同程度的考量，其中主要包括細細微性和通用性這兩塊的考慮。
C.對於業務元件，你更多需要考量的是針對你負責業務線的一個適用度，即你設計的業務元件是否成為你當前業務的 “通用” 元件，比如我之前分析過的許可權校驗元件，它就是一個典型的業務元件。感興趣的小夥伴可以點擊 傳送門 自行閱讀。
3.規範化：正所謂無規矩不成方圓，一些好的規範則能很好的説明我們對專案進行良好的開發管理。規範化指的是我們在工程開發初期以及開發期間制定的系列規範，其中又包含了
A.專案目錄結構
B.編碼規範：對於編碼這塊的約束，一般我們都會採用一些強制措施，比如 ESLint、StyleLint 等。
C.聯調規範：這塊可參考我以前知乎的回答，前後端分離，後臺返回的資料前端沒法寫，怎麼辦？
D.檔命名規範
E.樣式管理規範：目前流行的樣式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
F.git flow 工作流：其中包含分支命名規範、代碼合併規範等。
G.定期 code review
4.自動化：從最早先的 grunt、gulp 等，再到目前的 webpack、parcel。這些自動化工具在自動化合並、構建、打包都能為我們節省很多工作。而這些前端自動化其中的一部分，前端自動化還包含了持續集成、自動化測試等方方面面。
#AST, frontend, 前端, 工程化
留言
張貼留言