构建seajs业务模块之grunt VS spm build

在最开始,我并不知道grunt可以构建CMD模块.(以下spm指代spm build)

当时正困惑于如何用spm方便的构建业务模块,后来看到@>twinstony (感谢@twinstony的分享)使用grunt-cmd-xxx插件构建了CMD模块,跟着demo自己做了测试,的确可以构建,但是有一个问题:

grunt 方式不能把依赖的外部css(比如非项目中的jquery插件css)打包进来,而spm可以.

其原因是,spm会根据别名配置依次(./sea-mpdules -> ~/.spm/cache -> -> 源)查找并下载依赖,最后将依赖的css依赖打包进来(通过seajs.imporStyle).

而grunt并没有做这件事情,也许可以通过另一个grunt插件完成.

另,include这个参数是针对js模块的,对于css 而言则是”all”

还有一个不是问题的问题:

用grunt方式构建,参数配置项太多了,有时候找问题不太好找.或者说是过于灵活了,有时使开发者们无所适从.

而spm把很多东西都封装好了,只需配置简单几个参数即可,符合seajs简单一致的设计原则.

其实spm底层也是调用了grunt-cmd-transport以及其他模块,但把一些繁杂的配置帮我们处理好了

之前对于spm的困惑是:

1.打包出的模块id只能是family/version/name么? –通常业务模块并不需要这类命名

2.打包出的模块路径只能是直接输出到dist目录下? –不能像grunt那样,构建出来的目录结构与源文件的目录结构一致么?

3.输出目录不能指定么,只能是dist么? –如果可以指定,就可以直接省略掉部署环节(本地部署)

经过摸索与咨询,得出一个可行的解决方案,感谢@popomore 的指点

示例代码下载链接:

https://github.com/stoneChen/seajs-backbone-test/tree/master

(以下所有spm命令均在sea-modules的上一层目录下,即js下执行,package.json设置在这里)

A.所有模块部署在项目中.

以下以一个简单的示例(需要对backbone有一定了解)演示.

上图是目录结构.

sea-modules是spm默认的模块安装目录名.

为了开发方便,不必每次查看效果都要spm build一番,在开发阶段不使用spm打包代码,除源上的已成熟的组件外(可通过spm install安装都本地),均使用匿名模块查看页面效果.

上图是我把seajs结合backbone做的一个demo.

等所有功能开发完毕后,现在页面引入模块文件是这样的

1
seajs.use('start.js');

接着,进入打包阶段.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{
"family": "test",
"version": "0.0.1",
"name": "spmTest",
"spm": {
"idleading": "_output/",
"source": "sea-modules",
"output": [
"start.js",
"app/gettingStart.js",
"app/index.js",
"app/userlist.js",
"collection/C_userlist.js",
"model/M_gettingStart.js",
"model/M_index.js",
"model/M_user.js",
"view/V_gettingStart.js",
"view/V_index.js",
"view/V_user.js",
"view/V_userlist.js"
],
"alias": {
"$": "jquery/jquery/1.7.2/jquery",
"$-debug": "jquery/jquery/1.7.2/jquery-debug",
"jquery": "jquery/jquery/1.7.2/jquery",
"jquery-debug": "jquery/jquery/1.7.2/jquery-debug",
"select2": "jquery/select2/3.4.5/select2-zh-cn",
"select2-css": "jquery/select2/3.4.5/select2.css",
"select2-css-debug":"jquery/select2/3.4.5/select2-debug.css",
"underscore": "gallery/underscore/1.5.2/underscore",
"backbone": "gallery/backbone/1.1.0/backbone"
}
}
}

以上为package.json配置.

然后终端执行

1
spm build -O sea-modules/_output

如上图,然后_output目录就会被创建,相应目录结构的模块就会依次生成好.

然后改变页面上引入模块的路径,只需添加一个前缀即可:

1
seajs.use('_output/start.js'); //开发阶段是seajs.use('start.js');

 

之前开发好的功能,现在一样能够跑通,而且执行效率会更高.

下面,讲一下其中的注意点

package.json重点是idleading,source,output的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
"idleading": "_output/",
"source": "sea-modules",
"output": [
"start.js",
"app/gettingStart.js",
"app/index.js",
"app/userlist.js",
"collection/C_userlist.js",
"model/M_gettingStart.js",
"model/M_index.js",
"model/M_user.js",
"view/V_gettingStart.js",
"view/V_index.js",
"view/V_user.js",
"view/V_userlist.js"
],

1.idleading如果不配置,那么生成出来的id就是family/version/name这种形式,这个值怎么配,需要与source,output配合,最终达到的效果就是最终加载这个模块的路径(require或use的参数)与生成的id值要一致,至于为什么,请参考https://github.com/seajs/seajs/issues/930

2.source指定从当前目录下的哪个目录”查找”需要被构建的模块,这个官方文档有说明

3.output指定具体要被构建的模块,这里很重要,数组里的每个路径怎么写,生成出来的目录结构就是怎么样的.我曾经试过,将他们写成

1
2
3
4
5
6
7
8
9
10
11
12
13
"output": [
"start.js",
"app/*.js",
"collection/*.js",
"model/*.js",
"view/*.js"
]

 

但是前面提到那个css打包问题又出现了,而且模板文件也不打包了,好像是合并操作都失效了的感觉.这个就不知为何了,曾经提过issue,说是不支持这种写法.

4.执行build命令时指定 -O 的值,指定输出目录, 这个除了这种方式,不知道怎么在配置文件中解决,也提过issue,貌似需要自己实现.

5.还有一个奇怪的警告:

为啥会去找sea-debug?(后补:transport任务会转换source下所有文件,而sea-debug当然不是cmd模块,但是压缩版的sea.js也不是啊,怎么不警告?)

还有一点,下面那个152 files,貌似是对souce下的所有文件都进行transport了,但目标并不是全部,也就是说,实际上output的配置在transport后才起作用,是不是有些不太合理?

这样打包好后,结合seajs-debug,seajs-debug用于测试环境,线上调试,以及map控制时间戳,就能很好的管理所有模块了

ps:关于seajs的默认base,还有这种情况在:

本demo中即属于这种情况.

构建输出目录在sea-modules/_output下

访问backbobe-test.html查看最终效果

个人建议将工程代码在webstorm(@7.0+)中打开,webstorm会自动启动一个web服务,或者其他能够启动web服务的方式.

seajs-backbone作为根目录

B.业务模块部署在项目中,其他模块包括seajs本身及其插件部署在静态资源服务器见附件,构建时,只需将idleading做适当转换即可,总之要保证require或use时的路径和id一致

构建输出目录在sea-modules/_output2下

访问backbobe-test-outer.html查看最终效果

这种情况下需要启动两个web服务,一个webstorm的,一个静态资源服务器的,个人建议使用nodejs的anywhere启动.

接下来附上几幅效果图

A1.开发阶段:

A2.构建好后:

A3.构建好后,使用seajs-debug调试:

B1.公用模块外部部署,开发阶段:

B2.公用模块外部部署,构建好后:

B3.公用模块外部部署,构建好后调试:

代码下载地址:

https://github.com/stoneChen/seajs-backbone-test/tree/master

欢迎大家指出不正确或不合理的地方~

–从cnblogs搬来,写于2014-04-07 14:14