當前環境？
目前來說，web業務日益復雜化和多元化，前端開發從webpage模式為主轉變為webapp模式為主，前端的開發工作在某些
場景下被認為是日常的一項簡單工作，或者是某個項目的附屬品，而沒有看成一個軟件被認真對待。
在模式的轉變下，前端工程化日益復雜，會產生很多問題：
例如 如何進行高效的多人協作，如何保證項目的可維護性，如何提高項目的開發質量，如何降低項目的生產風險。
前端工程化是根據軟件工程的技術和方法對前端的工具，技術，開發流程，經驗等進行規范，使其更具規范化和標准化
，其目的是提高開發效率和降低生產成本，即提高開發過程的開發效率，減少重復的開發時間，其實前端工程化是軟件
工程的一部分，可以從理解軟件工程的角度去探討。
什么是前端工程化？
前端工程化里的工程是一個很大的概念，甚至創建一個git倉庫，也可以理解為創建了一個工程，軟件工程的定義是運
用計算機科學的理論和技術，以及工程管理的原則和方法，按進度和預算，實現滿足用戶要求的軟件產品的定義，開發
和維護的工程以及研究的學科。
前端工程化是為了讓前端可以自成體系，具體可以從四方面去討論，模塊化，組件化，規范化和自動化。
模塊化？
模塊化：將大的文件拆分成互相依賴的小文件，再進行統一的拼裝和加載。
js的模塊化：利用webpack+babel的模式將所有模塊系統進行打包，同步加載，也可以搭乘多個chunk異步加載。
利用瀏覽器的script標簽，type類型選modules類型即可。
css模塊化：之前的sass less 等預處理器雖然實現了css的拆分，但是並沒有解決模塊化很重要的一個問題，即選擇器
的全局污染問題。有三種解決辦法，第一種是利用webcomponents的技術實現，這個技術雖然解決了全局污染問題，但
是由於兼容性問題，目前用的不多，第二種是css in js 將css的技術全部摒棄，利用js或者json格式去加載css，這種
方式簡單粗暴，並且不容易處理偽類選擇器的問題，被大眾所認可的是第三種解決方案，即 css modules ，所有的css
文件由js來管理，這種技術最大程度利用了css的生態和模塊化的原則，其中vue中的scoped 就是這種技術的提現。
資源的模塊化：webpack的成功不僅僅是因為將js系統進行模塊化處理，而是它的模塊化原理，即任何資源都可以模塊
化且應該模塊化處理，優點有以下三點，1：目錄結構清晰化，2：資源處理集成化，3：項目依賴單一化。
組件化？
組件化：將UI頁面拆分正有模板+樣式+邏輯組成的功能單元，稱為組件，組件化不等於模塊化，模塊化是在資源和代碼
方面對文件的拆分，而組件化是在UI層面進行的拆分。
傳統前端框架的思想是以dom優先，先操作dom，再寫出可復用的邏輯單元來操作dom，而組件化框架是組件優先，將dom
和與之一起的邏輯組成一個組件，再進行引用。
我們封裝了組件后，還需要對組件間的關系進行判定，例如繼承，擴展，嵌套，包含等，這些關系統稱為依賴
規范化？
規范化：規范化是前端工程化很重要的一部分，項目前期規范制定的好壞，直接決定后期的開發質量，分為
項目目錄規范化，編碼規范化，前后端接口規范化，git分支管理，commit描述規范，組件管理等編碼規范化分為html
css js img 命名規范這幾類 接口規范，目的是規則先行，以減少聯調中不必要的問題和麻煩，自責划分 前端，渲染
邏輯和交互邏輯，后台，處理業務邏輯，各種格式的規定，例如 json盡量簡潔輕量，日期盡量字符串，等等。
自動化？
自動化：讓簡單重復的工作交給機器完成，例如自動化測試，自動化部署，自動化構建，持續繼承等。
參考大神鏈接：
https://www.jianshu.com/p/88ed70476adb