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