seajs使用心得【原创】web前端 杭州–小白 个人博客http://blogs.f2e.me
seajs作为中大型网站的模块js加载利器,最近挺受人欢迎的. 官方网址：http://seajs.org
So我也小小的试用了一把,折腾啊…有的人也许会问为啥要使用seajs,这个问题作者已经回答的很详细勒,俺就不做描述了.自己去官网找答案吧.也许你会发现它真的不错.
好了废话不多说,开始seajs的旅程.
一 .嗯,这里先准备一个工具node.js 下载地址：http://nodejs.org 官网下载 .当然是下载windows版本的撒,俺可不会玩liunx和MAC。下载好与你系统对应的windows版本就好了。
下载完成安装就好了.
我的电脑的node.js出现在目录C:\Program Files\nodejs 这个时候运行命令提示符(cmd),看这个文章的人应该都知道吧。不解释.进入到这个目录下：如图：
运行一下node -v查看下版本 有的话证明OK了
这个要安装干嘛呢？当然是有用的撒。安装一个spm工具.这个工具跟seajs紧密相关啊.我可是折腾好久了。
好了。在这个里面运行
npm install spm -g
这个时候就等待安装了。注意：这里要等很久,如果您有代理的话应该很快的，如果等很久没出来。多试几次很久就会出现了.这个过程真的很长.你可以先去seajs官网看seajs的使用文档了.
如下图过程：
出现如下图：
如果运行spm -v那就证明可以勒。安装好了。
2.这里可以从官网http://seajs.org下载seajs了。也可以通过命令，安装seajs啊。随便用命令进入一个空的目录,执行
spm install seajs
安装完毕之后就会有一个目录里面有seajs源文件了。顺便说下seajs要使用jquey的话 必须要用包装过的,so可以执行这个
spm install gallery.jquery
命令 把包装过的jquery下载下来使用。
想了解spm更多的用法 请看 https://github.com/spmjs/spm
3.上面都准备OK了。那么就是使用seajs勒。具体使用详情请看：
http://seajs.org/docs/#quick-start 文档：http://seajs.org/docs/#docs
那么这里是我的目录结构,可以看我提供的源文件吧. 附件 下载
demo1里面的文件.
4.js文件
这里我用init.js作为入口,加载依赖项目
通过文档的描述,然后在啪啪各种测试js出来了。往里面一放完事了,页面正常引用此init.js，哈哈很OK 。那么此时你用firebug看下.
尼玛这么多JS加载是不是很吓人啊.so我们还要在做一下处理.
此时就该打包工具spm出场了.至于seajs为啥一定要用spm那自己去官网看解释吧.
5.接下来,你们是不是发现这个里面还有一个文件，没错就是package.json 这个文件你们会问是干嘛的,
这个是spm的配置文件有用的,我这里面的配置
很简单配置可以在dist里面输出init.js.但是这里的配置很重要的,name就是输出文件夹名称,
我在这里的配置就出现过很大问题.之前没有配置name就出问题了.
spm工具默认的在这里配置之后输出到的地方就是dist.文件夹,同样你可以自己配置输出路径.
这里可以看官网：https://github.com/spmjs/spm 介绍很详细.
6.通过命令spm打包咯, 先通过命令进入到demo1所在的文件位置:
执行spm build命令。因为单独的执行这个命令默认的情况下是读取src文件夹里面的文件
。我的demo1里面没有src文件那么就要报错了，那么此时要把src改了，这里就要用到
spm build --src=js
的命令了。这里打包的文件就是js里面的文件.
这个时候就会默认生成输出到dist的文件里面了.
7.这个时候就该在页面调用了.
这里要注意一下。后面的’dist/init’也就是打包过的js路径.然而这个路径默认是以前面引入sea.js的路径做为基础的。这里我就遇到过坑，打包过的js就是不能够引入.没有效果.就是这里路径的问题. 那么前面红框的是引入的源码调试位置.上线的时候可以删掉.seajs官网有详细的解释勒.这里就不在说明了.
此时打包过之后在用firebug看.
是不是变成2个了
,就是这样子滴.
到此,终于折腾完了一遍了。。。。大家可以多试下其他的功能….反正不明白就狠狠的去他们官网看API文档吧.嘿嘿.
spm命令不会去官网 .sajs不会使用.去官网就对了….哈哈哈.
总结一下,在这个过程中问题最多的就是模块明明打包了,也引入了就是没有效果.其实说白了还是第5点配置文件没有正确.理解第七点我说的注意事项,那么打包之后的文件标识应该是这样子的,比如我的demo1里面的init-debug 中hello.js的标识应该是”dist/hello/hello-debug” 这个样子的才对嘛.仔细看这个路径也许您会明白点啥. 我的附件里面有2个demo 可以对比下.
附件 下载
【最近更新2013-04-19,这里新的spm版本使用方法,有所改变,本文的用法可能不适合现在了.各位亲们斟酌哦.可以去看官网.】