談談前端工程化是個啥？

目前來講，Web業務日益複雜化和多元化，前端開發已經由以WebPage模式爲主轉變爲以WebApp模式爲主了。如今隨便找個前端項目，都已經不是過去的拼個頁面+搞幾個jQuery插件就能完成的了。工程複雜了就會產生許多問題，好比：如何進行高效的多人協做？如何保證項目的可維護性？如何提升項目的開發質量？

前端工程化就是解決以上問題而生的。

前端工程化有四個特色：模塊化、組件化、自動化、規範化。   

模塊化：

就是將 一個大文件拆分紅相互依賴的小文件，再進行統一的拼裝和加載。只有這樣，纔有多人協助的可能。在工程化以前，一直是使用js、jquery、ajax，這沒有模塊概念，對於開發大型且複雜的系統會有必定的限制。

JS的模塊化

• 在ES6以前，JavaScript一直沒有模塊系統，這對開發大型複雜的前端工程形成了巨大的障礙。對此社區制定了一些模塊加載方案，如CommonJS、AMD和CMD等，某些框架也會有本身模塊系統，好比Angular1.x。
• 如今ES6已經在語言層面上規定了模塊系統，徹底能夠取代現有的CommonJS和AMD規範，並且使用起來至關簡潔，而且有靜態加載的特性。

CSS的模塊化

• 雖然SASS、LESS、Stylus等預處理器實現了CSS的文件拆分，但沒有解決CSS模塊化的一個重要問題：選擇器的全局污染問題。
• 按道理，一個模塊化的文件應該要隱藏內部做用域，只暴露少許接口給使用者。而按照目前預處理器的方式，導入一個CSS模塊後，已存在的樣式有被覆蓋的風險。雖然重寫樣式是CSS的一個優點，但這並不利於多人協做。
• 爲了不全局選擇器的衝突，各廠都制定了本身的CSS命名風格：BEM風格，bootstrap風格等
• 但這畢竟是弱約束。選擇器隨着項目的增加變得越多越複雜，而後項目組裏再來個新人帶入本身的風格，就更加混亂了。
• 從工具層面，社區又創造出Shadow DOM、CSS in JS和CSS Modules三種解決方案。
• Shadow DOM是WebComponents的標準。它能解決全局污染問題，但目前不少瀏覽器不兼容，對咱們來講還好久遠；
• CSS in JS是完全拋棄CSS，使用JS或JSON來寫樣式。這種方法很激進，不能利用現有的CSS技術，並且處理僞類等問題比較困難；
• CSS Modules仍然使用CSS，只是讓JS來管理依賴。它可以最大化地結合CSS生態和JS模塊化能力，目前來看是最好的解決方案。Vue的scoped style也算是一種。

 

資源模塊化

• 什麼是Webpack？
• WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。

• Webpack的強大之處不只僅在於它統一了JS的各類模塊系統，取代了Browserify、RequireJS、SeaJS的工做。更重要的是它的萬能模塊加載理念，即全部的資源均可以且也應該模塊化。

資源模塊化後，有三個好處：

• 依賴關係單一化。全部CSS和圖片等資源的依賴關係統一走JS路線，無需額外處理CSS預處理器的依賴關係，也不需處理代碼遷移時的圖片合併、字體圖片等路徑問題；
• 資源處理集成化。如今能夠用loader對各類資源作各類事情，好比複雜的vue-loader等等。
• 項目結構清晰化。使用Webpack後，你的項目結構總能夠表示成這樣的函數： dest = webpack(src, config)

 

 

組件化：

• 組件化≠模塊化。模板化只是在文件層面上，對代碼和資源的拆分；組件化是在設計層面上，對於UI的拆分。
• 從UI上拆分下來的每個包模板（html）+樣式（CSS）+邏輯（JS）功能完備的結構單元，稱之爲組件。
• 頁面上全部的東西均可以當作組件，頁面是個大型組件，能夠拆成若干個中型組件，而後中型組件還能夠再拆，拆成若干個小型組件，小型組件也能夠再拆，直到拆成DOM元素爲止。DOM元素能夠當作是瀏覽器自身的組件，做爲組件的基本單元。
• 傳統前端框架/類庫的思想是先組織DOM，而後把某些可複用的邏輯封裝成組件來操做DOM，是DOM優先，而組件化框架/類庫的思想是先來構思組件，而後用DOM這種基本單元結合相應邏輯來實現組件，是組件優先。這是二者最本質的區別。
• 目前市場上的組件化框架最多，主要的有Vue，React，Angular2。

 

自動化：

「簡單重複的工做交給機器來作」，自動化也就是有不少自動化工具代替咱們來完成，例如持續集成、自動化構建、自動化部署、自動化測試等等。

 

 規範化：（相當重要的一環）

在項目規劃初期制定的好壞對於後期的開發有必定影響。包括的規範有：

• 目錄結構的制定
• 編碼規範
• 先後端接口規範
• 文檔規範
• 組件管理
• Git分支管理
• Commit描述規範
• 按期codeReview
• 視覺圖標規範