前端工程化初探

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

模組化是指將乙個檔案拆分成多個相互依賴的檔案，最後進行統一的打包和載入，這樣能夠很好的保證高效的多人協作。其中包含

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 層面的拆分。

通常，我們會需要對頁面進行拆分，將其拆分成乙個乙個的零件，然後分別去實現這乙個個零件，最後再進行組裝。

在我們的實際業務開發中，對於元件的拆分我們需要做不同程度的考量，其中主要包括細粒度和通用性這兩塊的考慮。

對於業務元件，你更多需要考量的是針對你負責業務線的乙個適用度，即你設計的業務元件是否成為你當前業務的「通用」元件。

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

從最早先的 grunt、gulp 等，再到目前的 webpack、parcel。這些自動化工具在自動化合併、構建、打包都能為我們節省很多任務作。而這些只是前端自動化其中的一部分，前端自動化還包含了持續整合、自動化測試等方方面面。