spm build
spm build 的主要责任:将 src 文件生成为完整信息的 dist 文件。
模块分为两种:
- 生态圈模块
- 私有源模块
下面只讨论生态圈模块
输入与输出
假设有一个模块:
ninja/
package.json
src/
a.js
b.js
c.js
d.js
package.json 信息:
{
"name": "ninja",
"version": "1.0.0",
"author": "lepture <http://lepture.com>",
"moduleDependencies": {
"overlay": "1.2.1",
"jquery": "1.7.2"
},
"output": {
"a.js": ".", // 相当于把 a 的所有相对依赖打包成一个文件
"a-aio.js": "*", // 相当于把所有依赖模块打包成一个文件
"d.js": ["d.js"]
},
"sources": [
"private-repo.alipay.com",
"arale-repo.alipay.com"
]
}
注: aio (all in one)
spm build 后的结果为:
ninja/
package.json
src/
a.js
b.js
c.js
d.js
dist/
a.js
a-debug.js
a-aio.js
a-aio-debug.js
d.js
d-debug.js
其中 src 的内容为:
// a.js
define(function(require, exports, module) {
var b = require('./b')
var c = require('./c')
...
})
// b.js
define(function(require, exports, module) {
var overlay = require('overlay')
// overlay 1.2.1 依赖 jquery 1.7.1
...
})
// c.js
define(function(require, exports, module) {
var $ = require('jquery')
...
})
// d.js
define(function(require, exports, module) {
...
})
打包好的 dist 内容应该为:
a-debug.js:
define('#ninja/1.0.0/a', ['./b', './c', '#jquery/1.7.2/jquery', '#jquery/1.7.1/jquery', '#overlay/1.2.1/overlay'],
function(require, exports, module) {
var b = require('./b')
var c = require('./c')
...
}
)
define('#ninja/1.0.0/b', ['#jquery/1.7.1/jquery', '#overlay/1.2.1/overlay'],
function(require, exports, module) {
var overlay = require('#overlay/1.2.1/overlay')
}
)
define('#ninja/1.0.0/c', ['#jquery/1.7.2/jquery'], function(require, exports, module) {
var $ = require('#jquery/1.7.2/jquery')
})
a-aio-debug.js:
define('#ninja/1.0.0/a' …
define('#ninja/1.0.0/b' …
define('#ninja/1.0.0/c' …
define('#jquery/1.7.2/jquery' …
define('#jquery/1.7.1/jquery' …
define('#overlay/1.2.1/overlay' …
d-debug.js:
define('#ninja/1.0.0/d' …
id 的提取
$ spm build -v
>>> READING package.json
>>> PROCESS OUTPUT "a.js": "."
>>> GENERATE ID #ninja/1.0.0/a
id = #name/version/filename
其中 name 与 version 从 package.json 中读取。
依赖提取
>>> FIND DEPENDENCIES "a.js": ["./b", "./c"]
>>>
>>> PROCESS FILE ./b
>>> FOUND DEPENDENCIES ["overlay"]
>>> PARSE ALIAS "overlay" -> "#overlay/1.2.1/overlay"
>>> GET http://private-repo.alipay.com/overlay/1.2.1/overlay.tar.gz
>>> HTTP 404
>>> GET http://arale-repo.alipay.com/overlay/1.2.1/overlay.tar.gz
>>> HTTP 200
>>> READING overlay/1.2.1/dist/overlay-debug.js
>>> DEPENDENCIES ["#overlay/1.2.1/overlay", "#jquery/1.7.1/jquery"]
>>>
>>> PROCESS FILE ./c
>>> FOUND DEPENDENCIES ["jquery"]
>>> PARSE ALIAS "jquery" -> "#jquery/1.7.2/jquery"
>>> GET http://private-repo.alipay.com/jquery/1.7.2/jquery.tar.gz
>>> HTTP 404
>>> GET http://arale-repo.alipay.com/jquery/1.7.2/jquery.tar.gz
>>> HTTP 200
>>> READING jquery/1.7.2/dist/jquery-debug.js
>>> DEPENDENCIES ["#jquery/1.7.2/jquery"]
>>>
>>> DEPENDENCIES RESULT a.js: ["./b", "./c", "#overlay/1.2.1/overlay", "#jquery/1.7.1/jquery", "jquery/1.7.2/jquery"]
下载文件位于
ninja/
...
src/
_build/
download/
overlay/
1.2.1/
dist/
src/
package.json
关于从 cache 读取依赖,另外再讨论。
require 替换
>>> MODIFY a.js
>>> REPLACE ./b -> ./b
>>> REPLACE ./c -> ./c
>>> MODIFY b.js
>>> REPLACE overlay -> #overlay/1.2.1/overlay
>>> MODIFY c.js
>>> REPLACE jquery -> #jquery/1.7.2/jquery
文件合并
>>> BUILD a.js
>>> CONCAT a.js b.js c.js -> dist/a-debug.js
>>> COMPRESS a-debug.js -> a.js
>>>
>>>
>>> PROCESS OUTPUT "a-aio.js": "*"
...
...
>>> FINISHED in 5s
打包