webpack打包avalon＋oniui+jquery
隨着avalon的發展壯大，我根據CSDN的統計數字，中國前端大概有1％的人在使用avalon了。
avalon的最大優勢是能兼容IE6，並且其API是非常穩定，只是在1.3.7 對ms-duplex的攔截器做了一次改動（但這次改動也向下兼容），1.5中去除avalon.define的舊風格支持，廢掉ms-widget指令改成更強大的自定義標簽指令。相對於其他MVVM框架來說，是非常的良心。此外，配套是非常完善，尤其是oniui，也支持到IE6。至於對移動端啊，微信啊，支持也非常好，難怪每天加群的人這么多。
不過，一個問題是，avalon沒有提供打包機制，雖然官網有教如何用requirejs打包avalon(比如滴滴出行，他們則是用fis3打包avalon )，但也有一些小公司，因為前端團隊實力不濟，無法實現打包。因此就有了這篇文章了。
本文是使用當今最強大的構建工具webpack實現的，各種看官首先得裝上npm。
建立一個新工程（我是將此工程起名為oni）, 然后用npm初始化它，目的是建立一個package.json文件：
然后全局安裝以下東西
$ npm install webpack -g |
$ npm install style-loader css-loader url-loader text-loader -g |
然后再到oni目錄下執行npm link命令
$ npm link webpack style-loader css-loader text-loader |
雖然看似報了一大堆錯，但好歹也裝上了：
然后 我們安裝avalon依賴，由於要用oniui，只能使用1.4.* 版本，並且只能沒有加載器的版本（帶shim字樣的），請到這里下載https://github.com/RubyLouvre/avalon/tree/master/dist ,將里面的avalon.shim.js下載回來，放到dev/avalon目錄下。
然后 我們開始裝oniui。oniui是一個龐大的UI庫，為了滿足去哪兒各條業務線千奇百計的需求，組件非常豐富，功能強大無比! 我們沒有必要將它們全部裝上。我們可以在這里(https://github.com/RubyLouvre/avalon.oniui)一覽其全貌，挑選自己需要的組件（readme里有中文名）
比如，我們用手風琴（accordion）組件，那么打開里面的avalon.accordion.js的源碼，看其依賴情況：
會發現它依賴於avalon.getModel.js，這是在它的上級目錄;還有它的模板文件，與它同目錄; 還有一些樣式。accordion的目錄下有許多東西，為了節省時間，我們可以全部拷下來放到dev目錄下。
然后 我們在oni的根目錄下建立webpack的配置文件webpack.package.js，內容如下：
var webpack = require("webpack"); |
var path = require("path"); |
module.exports = { |
entry: "./dev/index", //我們開發時的入口文件 |
output: {path: path.join(__dirname, "dist"), filename: "bundle.js"}, //頁面引用的文件 |
module: { |
loaders: [ |
{test: /\.css$/, loader: 'style-loader!css-loader'} |
] |
}, |
resolve: { |
extensions: ['.js',"",".css"], |
alias: { |
avalon: './avalon/avalon.shim',//在正常情況下我們以CommonJS風格引用avalon,以require('avalon') |
"../avalon": './avalon/avalon.shim'//由於oniui都以是../avalon來引用avalon的，需要在這里進行別名 |
} |
} |
} |
dev下的index.js是這樣的：
var avalon = require("avalon") |
require("./accordion/avalon.accordion") |
avalon.define({ |
$id: "test", |
aaa: "Hello Avalon!" |
}) |
// 具體參考這里 https://github.com/RubyLouvre/avalon.oniui/blob/master/accordion/avalon.accordion.ex1.html |
avalon.define({ |
$id: "test", |
aaa: "Hello Avalon!", |
$opts:{ |
data: [{ |
'title': '標題1', |
'content': '正文1<p>fasdfsdaf</p>' |
}, { |
'title': '標題2', |
'content': '正文2' |
}], |
accordionClass: "oni-accordion-customClass", |
initIndex: 1, |
width: "500", |
onBeforeSwitch: function() { |
avalon.log(this); |
avalon.log(arguments); |
avalon.log("onBeforeSwitch callback"); |
}, |
onSwitch: function() { |
avalon.log("onSwitch callback"); |
}, |
multiple: true |
} |
}) |
然后我們在控制台下，定位到oni目錄下，輸入webpack開始打包，報了一堆錯誤
其實我對webpack也不怎么熟，主要是參考如下中文教程開始玩的
我思度一下，估計沒有像我這樣混用CommonJS與AMD兩種風格，問題是出在加載CSS上，難道正則有問題嗎？試了好久，沒有辦法，自己寫預加載器，從avalon.accordion的源碼中干掉css!字樣。
具體過程如下，在oni/node_modules目錄下建立一個amdcss-loader目錄，結構如下：
package.json內容如下（這個不能少）
{ |
"author": { |
"name": "RubyLouvre" |
}, |
"dependencies": {}, |
"description": "Webpack的預處理器,處理AMD風格的模塊依賴列表中的css!字符串", |
"license": "MIT", |
"main": "index.js", |
"name": "amdcss-loader", |
"scripts": { |
"test": "echo \"Error: no test specified\" && exit 1" |
}, |
"version": "0.0.1" |
} |
index.js內容如下：
module.exports = function (source) { |
this.cacheable && this.cacheable(); |
source = source.replace(/css\!/g, "") |
this.callback(null, source); |
}; |
將webpack.config.js修改如下：
var webpack = require("webpack"); |
var path = require("path"); |
module.exports = { |
entry: './dev/index', //我們開發時的入口文件 |
output: {path: path.join(__dirname, "dist"), filename: "bundle.js"}, //頁面引用的文件 |
module: { |
loaders: [ |
{test: /\.css$/, loader: 'style-loader!css-loader'} |
], |
preLoaders: [ |
{test: /\.js$/, loader: "amdcss-loader"} |
] |
}, |
resolve: { |
extensions: ['.js', "", ".css"], |
alias: { |
avalon: './avalon/avalon.shim', //在正常情況下我們以CommonJS風格引用avalon,以require('avalon') |
"../avalon": './avalon/avalon.shim'//由於oniui都以是../avalon來引用avalon的，需要在這里進行別名 |
} |
} |
} |
再打包就成功了！
好了，我們需要一個頁面看一下效果。oniui目錄下，建立一個index.html
<!DOCTYPE html> |
<html> |
<head> |
<title>TODO supply a title</title> |
<meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<script src="dist/bundle.js"></script> |
<style> |
body{ |
padding:2em; |
} |
</style> |
</head> |
<body ms-controller="test"> |
<h1>{{aaa}}</h1> |
<div ms-widget="accordion,$,$opts"></div> |
</body> |
</html> |
然后打開你的頁面就行看到效果了（我是使用netBeans直接運行，大家也可以試一下webpack-dev-server）
我們再看一下如何結合jquery一起使用，jquery我們還是使用兼容IE6的版本,可以到這里下回來，放到dev/jquery目錄下！
我們繼續修改webpack.config.js
var webpack = require("webpack"); |
var path = require("path"); |
module.exports = { |
entry: './dev/index', //我們開發時的入口文件 |
output: {path: path.join(__dirname, "dist"), filename: "bundle.js"}, //頁面引用的文件 |
module: { |
loaders: [ |
{test: /\.css$/, loader: 'style-loader!css-loader'} |
], |
preLoaders: [ |
{test: /\.js$/, loader: "amdcss-loader"} |
] |
}, |
resolve: { |
extensions: ['.js', "", ".css"], |
alias: { |
jquery: "./jquery/jquery.js", |
avalon: './avalon/avalon.shim', //在正常情況下我們以CommonJS風格引用avalon,以require('avalon') |
"../avalon": './avalon/avalon.shim'//由於oniui都以是../avalon來引用avalon的，需要在這里進行別名 |
} |
} |
} |
然后修改dev/index.js
var avalon = require("avalon") |
require("./accordion/avalon.accordion") |
var $ = require("jquery") |
avalon.define({ |
$id: "test", |
aaa: "Hello Avalon!", |
$opts:{ |
data: [{ |
'title': '標題1', |
'content': '正文1<p>fasdfsdaf</p>' |
}, { |
'title': '標題2', |
'content': '正文2' |
}], |
accordionClass: "oni-accordion-customClass", |
initIndex: 1, |
width: "500", |
onBeforeSwitch: function() { |
avalon.log(this); |
avalon.log(arguments); |
avalon.log("onBeforeSwitch callback"); |
}, |
onSwitch: function() { |
avalon.log("onSwitch callback"); |
}, |
multiple: true |
} |
}) |
$(function(){ |
$("<div>這是jQuery生成的</div>").appendTo("body") |
}) |
重新運行webpack命令，jquery就打包進去！
不過，我其實不希望大家將jquery與avalon都打包進去的，因為這兩個庫比較常用，幾乎每個頁面都有，建立放到CDN中，用script獨立引入。詳見 《Webpack 性能優化 （一）（使用別名做重定向）》一文。
至此，本文完畢。我是希望avalon社區能使用更強大的工具進行打包，而不是用requriejs之流了