seajs使用心得【原创】

seajs使用心得【原创】web前端 杭州小白 个人博客http://blogs.f2e.me

seajs作为中大型网站的模块js加载利器,最近挺受人欢迎的官方网址:http://seajs.org  

So我也小小的试用了一把,折腾啊有的人也许会问为啥要使用seajs,这个问题作者已经回答的很详细勒,俺就不做描述了.自己去官网找答案吧.也许你会发现它真的不错.

好了废话不多说,开始seajs的旅程.

一 .,这里先准备一个工具node.js 下载地址:http://nodejs.org  官网下载 .当然是下载windows版本的撒,俺可不会玩liunxMAC。下载好与你系统对应的windows版本就好了。

下载完成安装就好了.

我的电脑的node.js出现在目录C:\Program Files\nodejs 这个时候运行命令提示符(cmd),看这个文章的人应该都知道吧。不解释.进入到这个目录下:如图:

运行一下node -v查看下版本 有的话证明OK

这个要安装干嘛呢?当然是有用的撒。安装一个spm工具.这个工具跟seajs紧密相关啊.我可是折腾好久了。

好了。在这个里面运行

这个时候就等待安装了。注意:这里要等很久,如果您有代理的话应该很快的,如果等很久没出来。多试几次很久就会出现了.这个过程真的很长.你可以先去seajs官网看seajs的使用文档了.

如下图过程:

出现如下图:

如果运行spm -v那就证明可以勒。安装好了。

2.这里可以从官网http://seajs.org下载seajs了。也可以通过命令,安装seajs啊。随便用命令进入一个空的目录,执行

安装完毕之后就会有一个目录里面有seajs源文件了。顺便说下seajs要使用jquey的话 必须要用包装过的,so可以执行这个

命令 把包装过的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的配置文件有用的,我这里面的配置

图片6

很简单配置可以dist里面输出init.js.但是这里的配置很重要的,name就是输出文件夹名称,

我在这里的配置就出现过很大问题.之前没有配置name就出问题了.

spm工具默认的在这里配置之后输出到的地方就是dist.文件夹,同样你可以自己配置输出路径.

这里可以看官网:https://github.com/spmjs/spm 介绍很详细.

6.通过命令spm打包咯先通过命令进入到demo1所在的文件位置:

执行spm build命令。因为单独的执行这个命令默认的情况下是读取src文件夹里面的文件

。我的demo1里面没有src文件那么就要报错了,那么此时要把src改了,这里就要用到

的命令了。这里打包的文件就是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版本使用方法,有所改变,本文的用法可能不适合现在了.各位亲们斟酌哦.可以去看官网.】

本文固定链接: http://www.xiaobai8.com/Blog/700.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2012年11月22日发表在 JavaScript 分类下,
原创文章转载请注明: seajs使用心得【原创】 | web前端,杭州小白的个人博客,小白的个人博客
关键字: , ,

报歉!评论已关闭.