阿里雲無線&前端團隊是如何基於webpack實現前端工程化的

背景

前端經歷了初期的野蠻生長（切圖，寫簡單的特效）——爲了兼容瀏覽器兼容性而出現的各類類庫（JQUERY,YUI等——mv*（飽暖思淫慾，代碼多了，也就想到怎樣組織代碼結構，backbone，angularjs等）——工程化（利用grunt，gulp，yeoman作項目腳手架以及打包部署），然而這些東西配置起來須要必定的門檻，而且須要跟業務耦合。全端化、全棧化以及工程化的大環境下，咱們但願有這樣一套工具能夠儘可能多的支持業務場景，儘可能少的配置，儘可能簡單的使用命令。而DBL就是這樣一個前端自動化工具，主要功能：項目腳手架，本地server（支持wacth，修改當即生效）,本地可視化mock數據並會自動化生成接口文檔，deploy項目。下面會詳細介紹該工具的使用。

安裝dbl工具

sudo npm install dbl -g dbl -V 

項目腳手架

mkdir demo && cd demo dbl init 

運行命令後，dbl會爲咱們初始化項目結構：

|-demo |-- src |-- index.html |-- css |-- js |-- make-webpack.config.js |-- package.json |-- aliasMap.json ... 

如何使用及工具優點

咱們的項目腳手架依賴webpack（若是對此不熟悉的能夠自行谷歌），優點在於：

• 比起grunt，gulp，在配置上要簡單不少。另外，grunt，gulp只是做爲打包工具，若是要作模塊化開發，還必須引入requirejs或者seajs。而用了dbl，你徹底不用考慮那些麻煩的配置問題，一切都幫你配置好了，你能夠像寫node同樣寫js了。
• 模塊化開發，一個完整模塊應該包含html，css，js。在傳統工具中，咱們很難維護模塊css和js保持同步。而dbl，能夠用作到在開發過程當中直接這樣使用：

/**這是文件 component/list.js**/ require('component/list.less') 

工具會自動把less編譯成css，而且在html頁面上生成style標籤，並把css插入進去。細心的你可能會說，html應該對於style標籤有個數限制，太多沒法支持。並且若是上線時採用這種方式不能很好的利用cdn緩存——不過，不用擔憂，deploy的時候，咱們會把這些style提取出來，根據頁面級別合併成一個css文件。

• 資源儘可能利用瀏覽器緩存。利用angularjs + requirejs，若是有多個vm頁面，公用的資源咱們習慣用grunt-requirejs根據頁面打包在一塊兒。這樣作，就忽視了瀏覽器緩存對於性能的影響。而dbl，若是有兩個頁面共同引用了一個模塊，這個模塊將會被打包到common.js。
• 支持less，sass（這個考慮到不少用戶安裝時會出問題，若是須要本身在 make-webpack.config.js配置里加上便可）。這種可配置的方式極大的考慮了擴展。
• 本地server。修改自動生效，並且幾乎是瞬時的。
• 本地mock數據。mock數據是經過啓用另一個node服務做爲數據提供方。 ~~~js dbl server -p 3001 ~~~ 此命令運行後，mock服務自動啓動。默認端口是8001——注意server和mock是兩個獨立服務。mock服務能夠可視化編輯接口，會自動生成接口文檔，方便先後端合做。並且只要項目在，理論上這個文檔必定是最新的。比記錄在doc文檔系統方便多了。你能夠經過:http://localhost:8001 訪問，界面長這樣： 
• dbl deploy 命令會把資源進行打包壓縮，而且在當前目錄下生成build文件夾。到這裏，你就能夠愉快的把此目錄上傳到cdn上了。

項目地址：https://github.com/cc17/dbl

交流請加qq：375856344