資訊專欄INFORMATION COLUMN
摘要：?jiǎn)?dòng)新技術(shù)提供測(cè)試框架進(jìn)行單元測(cè)試，代碼覆蓋率報(bào)告，可與和快速對(duì)接。關(guān)于的模塊化，預(yù)處理器的編譯。頁(yè)面的其他資源文件，通過(guò)引入單元測(cè)試日后調(diào)整，待開(kāi)發(fā)使用手冊(cè)流程基本位于創(chuàng)建視圖更多說(shuō)明主動(dòng)引入的默認(rèn)地址為位于配置相關(guān)的和文件。
webpack2-Scaffolding
請(qǐng)各位看客老爺不要吝嗇自己的Star，先來(lái)Github右上角Star一下唄。
Github右上角Star。
Github右上角Star。
重要的事情說(shuō)三遍
項(xiàng)目地址https://github.com/sayll/avalon-webpack-start
介紹webpack2腳手架正式版，一個(gè)多資源統(tǒng)籌的腳手架。
本項(xiàng)目使用avalon2作為演示框架。
為兼容低版本瀏覽器，我也是強(qiáng)烈推薦一下它。市面上應(yīng)該也算唯一能夠支持到IE8以下的MVVM框架了吧。
服務(wù)端使用Koa。需要注意的是，只有一個(gè)目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（代碼熱替換）。使用自定義的Koa程序替換webpack-dev-server，讓它更容易實(shí)現(xiàn)universal 渲染和為了不使這個(gè)包過(guò)于龐大。
針對(duì)不同的loader采用了多線程編譯，極大的加快了編譯速度。
使用webpack.DllReferencePlugin打包框架和庫(kù)。加快編譯與打包速度。
啟動(dòng)新技術(shù)tree-shaking
提供測(cè)試框架進(jìn)行單元測(cè)試，代碼覆蓋率報(bào)告，可與Travis-ci和Coveralls快速對(duì)接。【配置說(shuō)明】
Babel被配置babel-plugin-transform-runtime可以讓代碼更優(yōu)化。
關(guān)于【Css】css的模塊化，預(yù)處理器的編譯。（支持sass,scss,less,postcss）
針對(duì)低版本瀏覽器和其他瀏覽器內(nèi)核的特殊性，啟用autoprefixer自動(dòng)添加瀏覽器前綴
針對(duì)移動(dòng)開(kāi)發(fā)，有獨(dú)特的處理方案。（具體文檔等待補(bǔ)充）
可導(dǎo)入字體和字體圖標(biāo)，操作非常簡(jiǎn)單。（如阿里系icon）【配置文檔】
每次修改都會(huì)生成新的文件名，防止舊樣式緩存帶來(lái)的影響。（與JS間做了特殊處理，通過(guò)JS引入的CSS不會(huì)因JS改變而改變它的hash值）
針對(duì)開(kāi)發(fā)模式啟用修改自動(dòng)刷新頁(yè)面。（做了特殊處理，發(fā)布模式將得到優(yōu)化）
關(guān)于【Js】支持ES6的最新特性
模塊化，可才用ES6的import，也可用AMD規(guī)范的require
每次修改都會(huì)生成新的文件名，防止舊腳本緩存帶來(lái)的影響。（與CSS間做了特殊處理，通過(guò)JS引入的CSS不會(huì)因CSS改變而改變它的hash值）
快速編譯，自動(dòng)刷新。
將常用的框架和庫(kù)進(jìn)行多帶帶打包。(Dll)防止重復(fù)引用，導(dǎo)致打包文件臃腫。
提供公共腳本的文件入口，此文件將被所有頁(yè)面自動(dòng)引用。（可設(shè)置全局變量，引入公共的庫(kù)。如Jquery）
關(guān)于【Html】支持單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的混合開(kāi)發(fā)。
自動(dòng)引入頁(yè)面的CSS和JS文件。無(wú)需手動(dòng)設(shè)置URL。(所有文件hash的改變都會(huì)導(dǎo)致文件名改變,這里的資源引用全由內(nèi)部自動(dòng)完成)
如有使用常用的框架和庫(kù)進(jìn)行多帶帶打包。(Dll),將需要多帶帶引用dll的vendor.js;
開(kāi)始 環(huán)境配置安裝node.js
安裝git
依賴配置確認(rèn)好你的環(huán)境配置，然后就可以開(kāi)始以下步驟。
$ git clone https://github.com/sayll/avalon-webpack-start.git $ cd avalon-webpack-start $ npm install # Install project dependencies $ npm start # Compile and launch
如果一切順利,就能正常打開(kāi)端口:http://localhost:1000/
開(kāi)發(fā)過(guò)程中，你用得最多的會(huì)是npm start，但是這里還有很多其它的處理：
| npm run
位于app/view配置html相關(guān)的JS和CSS文件。(JS和CSS需與HTML保持一致，可參考現(xiàn)有模版)【更多說(shuō)明】 高級(jí) 引用字體圖標(biāo)Icon【更多說(shuō)明】 使用框架(avalon)或庫(kù)(jquery)【更多說(shuō)明】 設(shè)置全局變量。雖引入公共庫(kù)，但每次調(diào)用都需重新聲明。所以就有了公共文件來(lái)提前聲明?！靖嗾f(shuō)明】 使用Css預(yù)處理器(更多說(shuō)明) 使用CDN(更多說(shuō)明) 修改目錄結(jié)構(gòu)(更多說(shuō)明) 最后 打包文件為build文件夾，請(qǐng)以此為根目錄。 更新日志更新詳情 最重要的事情項(xiàng)目地址: https://github.com/sayll/avalon-webpack-start 親不要吝嗇自己的Star，到Github右上角Star一下唄。 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81391.html 相關(guān)文章
發(fā)表評(píng)論0條評(píng)論
0x584a男|高級(jí)講師TA的文章閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
|
|---|
