資訊專欄INFORMATION COLUMN
摘要：而就是這樣一個前端自動化工具，主要功能項目腳手架，本地實時監(jiān)控，修改立即生效本地可視化數(shù)據(jù)并會自動化生成接口文檔，項目。這樣做，就忽視了瀏覽器緩存對于性能的影響。修改自動生效，而且?guī)缀跏撬矔r的。默認(rèn)端口是注意和是兩個獨(dú)立服務(wù)。
背景
安裝dbl工具前端經(jīng)歷了初期的野蠻生長（切圖，寫簡單的特效）——為了兼容瀏覽器兼容性而出現(xiàn)的各種類庫（JQUERY,YUI等——mv*（飽暖思淫欲，代碼多了，也就想到怎樣組織代碼結(jié)構(gòu)，backbone，angularjs等）——工程化（利用grunt，gulp，yeoman做項目腳手架以及打包部署），然而這些東西配置起來需要一定的門檻，并且需要跟業(yè)務(wù)耦合。全端化、全?；约肮こ袒拇蟓h(huán)境下，我們希望有這樣一套工具可以盡量多的支持業(yè)務(wù)場景，盡量少的配置，盡量簡單的使用命令。而DBL就是這樣一個前端自動化工具，主要功能：項目腳手架，本地server（實時監(jiān)控，修改立即生效）,本地可視化mock數(shù)據(jù)并會自動化生成接口文檔，deploy項目。下面會詳細(xì)介紹該工具的使用。
sudo npm install dbl -g dbl -V項目腳手架
mkdir demo && cd demo dbl init
運(yùn)行命令后，dbl會為我們初始化項目結(jié)構(gòu)：
|-demo
|-- src
|-- index.html
|-- css
|-- js
|-- make-webpack.config.js
|-- package.json
|-- aliasMap.json
...
如何使用及工具優(yōu)勢
我們的項目腳手架依賴webpack（如果對此不熟悉的可以自行谷歌），優(yōu)勢在于：
比起grunt，gulp，在配置上要簡單很多。另外，grunt，gulp只是作為打包工具，如果要做模塊化開發(fā)，還必須引入requirejs或者seajs。而用了dbl，你完全不用考慮那些麻煩的配置問題，一切都幫你配置好了，你可以像寫node一樣寫js了。
模塊化開發(fā)，一個完整模塊應(yīng)該包含html，css，js。在傳統(tǒng)工具中，我們很難維護(hù)模塊css和js保持同步。而dbl，可以用做到在開發(fā)過程中直接這樣使用：
/**這是文件 component/list.js**/
require("component/list.less")
工具會自動把less編譯成css，并且在html頁面上生成style標(biāo)簽，并把css插入進(jìn)去。細(xì)心的你可能會說，html應(yīng)該對于style標(biāo)簽有個數(shù)限制，太多無法支持。而且如果上線時采用這種方式不能很好的利用cdn緩存——不過，不用擔(dān)心，deploy的時候，我們會把這些style提取出來，根據(jù)頁面級別合并成一個css文件。
資源盡量利用瀏覽器緩存。利用angularjs + requirejs，如果有多個vm頁面，公用的資源我們習(xí)慣用grunt-requirejs根據(jù)頁面打包在一起。這樣做，就忽視了瀏覽器緩存對于性能的影響。而dbl，如果有兩個頁面共同引用了一個模塊，這個模塊將會被打包到common.js。
支持less，sass（這個考慮到很多用戶安裝時會出問題，如果需要自己在 make-webpack.config.js配置里加上即可）。這種可配置的方式極大的考慮了擴(kuò)展。
本地server。修改自動生效，而且?guī)缀跏撬矔r的。
本地mock數(shù)據(jù)。mock數(shù)據(jù)是通過啟用另外一個node服務(wù)作為數(shù)據(jù)提供方。
dbl server -p 3001
此命令運(yùn)行后，mock服務(wù)自動啟動。默認(rèn)端口是8001——注意server和mock是兩個獨(dú)立服務(wù)。mock服務(wù)可以可視化編輯接口，會自動生成接口文檔，方便前后端合作。而且只要項目在，理論上這個文檔一定是最新的。比記錄在doc文檔系統(tǒng)方便多了。你可以通過:http://localhost:8001 訪問，界面長這樣：
dbl deploy 命令會把資源進(jìn)行打包壓縮，并且在當(dāng)前目錄下生成build文件夾。到這里，你就可以愉快的把此目錄上傳到cdn上了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/11721.html
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：發(fā)布是由團(tuán)隊開源的，操作接口庫，已成為事實上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來了，，支持自定義頭部與腳部，支持增強(qiáng)，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進(jìn)行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...
摘要：隨著業(yè)務(wù)的爆發(fā)，團(tuán)隊人數(shù)迅速增長起來，團(tuán)隊名也從前端開發(fā)部改名成體驗技術(shù)部，意在體現(xiàn)前端工程師的核心競爭力用技術(shù)解決產(chǎn)品體驗問題。前后端分離的研發(fā)模式在社區(qū)流行起來，體驗技術(shù)部最先實踐的是基于的應(yīng)用層方案。2008 年對中國人是復(fù)雜的一年，冰災(zāi)，大地震，奧運(yùn)會接踵而至。對玉伯來說也一樣，趕在奧運(yùn)會排查臨時人口之前，玉伯從北京中科院軟件所離開，憑著自己幾年來在程序開發(fā)上的經(jīng)歷和對新興前端行業(yè)的...
閱讀 3090·2023-04-26 00:40
閱讀 2435·2021-09-27 13:47
閱讀 4353·2021-09-07 10:22
閱讀 2990·2021-09-06 15:02
閱讀 3348·2021-09-04 16:45
閱讀 2534·2021-08-11 10:23
閱讀 3629·2021-07-26 23:38
閱讀 2923·2019-08-30 15:54
