seajs 和spm的使用简介

说实话, 前端开发是一个令人头痛的事情.

nodejs出现了很久了, 一直不是很习惯用nodejs, 当初刚出来的时候, 就下载了express, 想搭建个网站, 结果不是我的菜, 愣是用的不习惯,也就搁置了很久.

直到发现了kissy, aliceui.org, 淘宝支付宝系的前端js框架和css解决方案.

先说kissy, 这东西用在淘宝上, 实际上就是淘宝自己的jQuery+css框架, 功能已经有目共睹了, 淘宝的页面在各种浏览器上显示还是挺一致的.

再说aliceui, 其实应该叫做alice, 是支付宝的前端css解决方案, 是arale的子集.

然后再提到seajs, 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs, labjs是可以动态载入js文件, 然后延迟将js功能加载到内存的工具.

seajs和requirejs类似, 但是seajs不仅仅有labjs的功能, 而且可以加载模块.

实际上来说seajs有了自己的生态系统. 只要按照seajs约定的CMD( 通用模块定义?)来开发js模块, seajs就可以动态加载.

模块的名字为good.js, 只需要seajs.use('good'), 不需要添加扩展名.js.

回头再说aliceui, 现在aliceui自己说, 有了一个CMD的生态圈, 意思是aliceui, 在css解决方案上, 使用了类似于seajs的CMD规范.

它使用的是@import('good'), 最后导入的是good.css而已.

另外, aliceui有自己的一套css的class的命名规范. 具体可以到aliceui.org去看看. 注:aliceui.com是以前的域名, 现在估计已经挂了.

然后再要提到的是spm了, 类似于npm.

前面说了, seajs要做自己的生态系统, 实际上说seajs是想做浏览器端js的nodejs, 然后按照CMD规范开发的模块都使用spm来管理(类似于nodejs的模块使用npm管理是一样的)

一. seajs的简单使用

首先安装nodejs, 到官方网站下载nodejs, 直接安装

然后如果是linux, 应该需要自己装npm, windows版的是自带npm的.

然后再安装seajs, 方法是使用npm, 在命令行下输入命令:

npm install seajs -g #输入-g是装到全局,我的理解, 因为我装stylus的时候没有使用-g参数, 结果stylus就装到我运行命令行程序的那个目录里了. 在 C:\Documents and Settings\Administrator\Application Data\npm\node_modules 这个文件夹里没有stylus. stylus命令也用不了了.

注意, 装好nodejs和npm之后, 需要设置环境变量, 设置 NODE_PATH=C:\Documents and Settings\Administrator\Application Data\npm\node_modules

至于seajs的使用教程: 给几个链接, 再自己百度吧

高富帅seajs使用示例及spm合并压缩工具露脸 http://www.zhangxinxu.com/wordpress/2012/07/seajs-node-nodejs-spm-npm/

JavaScript模块化开发库之SeaJS http://www.cnblogs.com/snandy/archive/2012/03/30/2423612.html

以上链接有实例, 可以好好看看.

二. spm的简单使用

这个是我要重点说的.

因为aliceui也是使用spm来管理的, 可以使用spm来初始化一个seajs模块, 开发完之后, 可以使用spm来压缩js, 压缩css, 把几个js打包到一个js文件, 把几个css打包到一个css文件, 然后还可以使用spm将自己开发的seajs模块, 发布到seajs.org的网站上, 然后在别的地方又可以下载下来, 或者给别人使用.

spm还可以将自己开发完的js模块, 发布到自己的服务器上, 通过ssl账号上传到服务器, 文档是这么说的, 具体我没有试过.

1. spm的安装

使用命令 npm install spm -g 装到nodejs全局

然后需要安装spm的几个子命令, nodejs叫plugin

安装方法很简单, 

npm install spm-init   # 一定要装

npm install spm-build # 一定要装

npm install spm-doc   # 一定要装, 这个很好

npm install spm-publish  # 这个命令发布你的模块到seajs.org, 必须注册seajs.org网站用户

npm install spm-deploy  # 这个命令应该是ssh发布到服务器

或者在spm装好了之后, 使用

spm install init

spm install build

spm install doc

spm install publish

spm install deploy

其实这些init, build相当于spm的插件或者说子命令

2. spm使用

这个可以先看 aliceui网上的 构建模块和样式库: http://aliceui.org/docs/build.html

2.1下面我从零开始说说一个模块和css的建立.

假设模块叫 box, 

那么到你的项目目录里, 使用命令行方式进入

新建模块box: 使用命令

md box  #创建box文件夹

cd box # 进入box文件夹

spm init # 调用spm的init子命令, 在box文件夹里初始化创建一些文件, 这个命令是使用交互提问的方式来初始化的, 不想回答的话就直接回车, 它自己有默认值, 括号内的就是

交互提问如下:

C:\box>spm initRunning "init:C\:\Documents and Settings\Administrator\.spm\init\cmd" (init) taskThis task will create one or more files in the current directory, based on theenvironment and the answers to a few questions. Note that answering "?" to anyquestion will show question-specific help and answering "none" to most questionswill leave its value blank.Please answer the following:[?] Project name (box)    #直接回车, 因为spm会使用你的目录名字作为模块名字, 比如这里的box[?] your CMD family dreamteam  # 输入dreamteam, 回车, 这个是你自己的CMD生态圈家族样式, 因此用你的公司的名字或者项目代号即可[?] author huyoo # 作者的名字, 这里写我自己[?] Version (1.0.0) # 版本直接回车, 或者输入一样的格式比如0.0.1,回车[?] Description (The best project ever.) the box module #输入the box module, 回车, 模块的描述[?] Project git repository (git://github.com/Administrator/box.git) # 这里直接回车, 可见这个spm不是很智能, 只知道用电脑当前登录用户的名字[?] Project homepage (https://github.com/Administrator/box) # 直接回车, 其实我觉得应该用上面输入的author那么作为这里的Adminitrator的替换[?] Licenses (MIT) GPL #默认是MIT, 这里给修改为GPL[?] Do you need to make any changes to the above before continuing? (y/N) #大写的N是默认的, 也就是说你不需要再修改上面的信息了.不需要修改就直接回车Writing .gitignore...OK # 这个是给你自己的git建库用的, git init(要装git命令, 这个不是nodejs的包)Writing .travis.yml...OKWriting HISTORY.md...OKWriting README.md...OKWriting examples/index.md...OKWriting package.json...OKWriting src/box.css...OKWriting src/box.js...OKWriting tests/box-spec.js...OK  #以上是spm创建的初始化的几个文件. 主要的东西在src目录下, 用你的模块名创建的 box.js和box.cssInitialized from template "cmd".Done, without errors.

多说几句, 这几个文件是可以修改的, 不要傻里傻气的, 但是不是box创建完毕之后, 才去修改.

实际上每个模块都是通过一个文件夹中的模板来创建的, 这个模板中只提供了你的模块名字作为替换.

这些模板放在C:\Documents and Settings\Administrator\.spm\init\cmd\root 文件夹里, 可以去看看是不是. 这几个模板文件真的是可以修改的, 有时候还必须得修改, 这个放在后面说.

2.2 好了现在, box初始化完毕了,那么可以试试spm build 命令了:

C:\box>spm build           Task: "clean:build" (clean) task           Task: "spm-install" task           Task: "transport:src" (transport) task      transport: 2 files           Task: "concat:css" (concat) task       concated: 2 files           Task: "transport:css" (transport) task      transport: 2 files           Task: "concat:js" (concat) task       concated: 4 files           Task: "copy:build" (copy) task         copied: 1 files           Task: "cssmin:css" (cssmin) task           file: .build/dist/box.css created.           Task: "uglify:js" (uglify) task           file: ".build/dist/box.js" created.           Task: "clean:dist" (clean) task           Task: "copy:dist" (copy) task         copied: 4 files           Task: "clean:build" (clean) task       cleaning: .build...           Task: "spm-newline" task         create: dist/box-debug.css         create: dist/box-debug.js         create: dist/box.css         create: dist/box.js           Done: without errors.

也就是说spm build 创建了一个叫做dist的文件夹,  也就是发布用的文件夹. 这个其实没什么意思, 就是创建了box.js, box.css, 这俩是压缩版的, 然后带-debug后缀的是没有压缩版的, 以便前端开发这可以在浏览器中调试查阅.

2.3 build试过, 就轮到 spm doc了

这个是极好的东西, 哈哈.

spm doc watch --port 8080 # 这个命令在本机8080端口启动了一个web服务, 打开 http://localhost:8080/  就可以看到你的box模块的文档了, 这个文档由box/readme.md 这个文件生成, 可以打开readme.md这个markdown格式的文本文件来看看.

当然, spm doc watch 命令不带port也能运行, 因为它有一个默认端口是8000, 上面是为了让大家明白, 当你的8000端口被其他应用占用的时候, 怎么换个端口看自己开发的box模块了.

我之所以说spm doc是个好东西, 就是因为它直接将你的markdown格式的文档文本, 转换为html了.因为我就是因为这个doc转html才喜欢上spm的, 进而觉得nodejs这个平台的还是有一些很方便的工具的, 通过对spm的使用, 我觉得nodejs挺好的, 感觉nodejs上的东西上手了.

当然, 我对seajs本身是没什么好感的, 因为我本来是冲着aliceui来, 以及aliceui的一些css模块的开发和管理引领着我开始学习spm的.  spm也确实不错, 单就结合nico模块, 把css代码块, 和js代码块直接转换成在html中可以使用的css和js, 就让人很爽了.

2.4 简单修改readme

打开readme, 发现里面全部是英文的, 好吧, 我加几个中文进去:

然后在 http://localhost:8080 刷新 , 结果中文字不显示, 是空白的!

这个算是怪事吧? 其实也简单, 直接将readme.md文件转换为 utf-8编码即可看到中文了.

转换的工具有一些批量转换软件, 也有一些ide, 当然, 我是用ultraedit和notepad++转换的, 最好建议转换为utf-8无BOM编码格式, 至于什么叫无BOM, 自己百度.

好了, 这一篇各种复制粘贴, 已经很长了, 再换一篇继续写spm的使用.