很久沒寫過博客沉淀下，最近看了幾篇前端工程化的文章，結合自己實踐所學，闡述下什么是前端工程化，
大前端其實分為很多種
- 移動應用開發的前端
- web前端
本篇主要是說下web前端的工程化
什么是前端工程化
在回答前端工程化這個問題之前，我們應該先考慮另外一個問題：前端開發中會不會涉及到業務？再詳細一點，就是前端工程師到底需不需要了解服務端的業務邏輯，再或者說，要不要將一部分服務端的業務邏輯放到前端來實作，這個問題沒有標準的答案，實際上應該屬于工程協作問題，就是誰該干什么的問題，
最早的前端開發就是實作頁面，頂多再寫寫JS讓頁面可以有互動的特效，屬于前后端未分離的時代，
但是隨著需求的增加，我們不僅要做Web應用，還要做App、小程式以及各種端，前后端分離的時代開始，在這種需求日增的情況下，必須得考慮一種新的方式，優化前端的開發作業，例如，解決代碼冗余，專案可維護性，提升版本迭代速度等等一系列的問題，前端工程化的概念也就是在這中情況下被提出了，
前端工程化的主要目標就是解放生產力、提高生產效率，通過制定一系列的規范，借助工具和框架解決前端開發以及前后端協作程序中的痛點和難度問題，
工程化變表現
一切以提高效率、降低成本、質量保證為目的手段都使工程化
- 創建：腳手架
- 編碼：代碼格式化、編碼效率
- 預覽：熱更新、Mock、Source Map
- 代碼提交：專案整體檢查
- 部署：自動發布
注意，工程化不是某個工具，工具化只是實作工程化的方式，如vue-cli，node對前端工程化起了非常大的作用
首先前端工程化是把軟體工程相關的方法和思想應用到前端開發中，
狹義上的理解：將開發階段的代碼發布到生產環境，包含：構建，分支管理，自動化測驗，部署
廣義上理解：前端工程化應該包含從編碼開始到發布，運行和維護階段
也有人把 前端工程化 等同于 效率工程
認為一切能提升前端開發效率、提高前端應用質量的方法和工具都是前端工程化，我覺得這么理解也是沒有問題的，提升開發效率、提升產品質量、降低開發難度、降低企業成本應該是工程化的意義所在，
前端工程化的特點
前端工程化可以分成四個方面來說，分別為模塊化、組件化、規范化和自動化，
模塊化
模塊化是指將一個檔案拆分成多個相互依賴的檔案，最后進行統一的打包和加載，這樣能夠很好的保證高效的多人協作，其中包含
- 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，這些自動化工具在自動化合并、構建、打包都能為我們節省很多作業，而這些只是前端自動化其中的一部分，前端自動化還包含了持續集成、自動化測驗等方方面面，
以上就是我所了解的前端工程化，以工程的角度去理解我們的web前端，工程是工程，而不是某項技術，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255919.html
標籤：其他
上一篇：ES6之-優雅的Promise