SPM v1.1.2使用指南

1.SPM用途

SeaJS提供了模块化开发的机制，在代码开发完后，还需要做产品发布相关的一些操作。 这些可以通过SPM来完成，SPM提供了模块安装、压缩、打包部署等功能。

2.SPM安装

1.从官网下载最新版本的node。 这里以node-0.8.14为例，直接下载windows版本的安装包即可，默认安装到"C:\Program Files\nodejs", 会自动添加到path中，查看一下版本。

C:\Documents and Settings\Administrator>node -vv0.8.14

2.新版的node都带了npm,这里通过npm来安装spm。下面指定安装1.1.2版本，在当前为最新版本。 如果不指定版本号，默认安装最新版本。安装包大小为11.8M，根据网速不同，请耐心等待。

C:\Documents and Settings\Administrator>npm install spm@1.1.2  -gnpm http GET https://registry.npmjs.org/spm/1.1.2npm http 200 https://registry.npmjs.org/spm/1.1.2npm http GET https://registry.npmjs.org/spm/-/spm-1.1.2.tgznpm http 200 https://registry.npmjs.org/spm/-/spm-1.1.2.tgznpm http GET https://registry.npmjs.org/spm-envnpm http GET https://registry.npmjs.org/csslintnpm http GET https://registry.npmjs.org/async...

下载完spm后，会根据压缩包中的package.json自动安装相关的依赖包,最后会显示如下的界面。

C:\Documents and Settings\Administrator\Application Data\npm\spm -> C:\Documents and Settings\Administrator\ApplicationData\npm\node_modules\spm\bin\spmspm@1.1.2 C:\Documents and Settings\Administrator\Application Data\npm\node_modules\spm├── inherits@1.0.0├── spm-env@1.0.0├── colors@0.6.0-1├── semver@1.0.14├── async@0.1.22├── csslint@0.9.9├── coffee-script@1.3.3├── clean-css@0.6.0├── JSONPath@0.9.0 (underscore@1.3.3)├── prettyjson@0.7.1├── request@2.9.203├── shelljs@0.0.8├── uglify-js@1.3.4├── optimist@0.3.5 (wordwrap@0.0.2)├── fstream@0.1.19 (graceful-fs@1.1.14, rimraf@2.0.2, mkdirp@0.3.4)├── tar@0.1.13 (block-stream@0.0.6)├── less@1.3.1├── jshint@0.7.3 (cli@0.4.3, minimatch@0.0.5)├── fstream-ignore@0.0.5 (minimatch@0.2.9)├── glob@3.1.14 (graceful-fs@1.1.14, minimatch@0.2.9)├── prompt@0.2.8 (revalidator@0.1.5, pkginfo@0.2.3, read@1.0.4, winston@0.6.2, utile@0.1.6)└── connect@2.6.2 (fresh@0.1.0, pause@0.0.1, cookie-signature@0.0.1, bytes@0.1.0, cookie@0.0.4, crc@0.2.0, debug@0.7.0, qs@0.5.1, formidable@1.0.11, send@0.1.0)

3.安装后检查一下版本

C:\Documents and Settings\Administrator>spm  -vv1.1.2

 

  如果这种方式安装比较慢，可以git 源码后安装，详见官方文档。 

本次测试使用的是Widnows XP操作系统 

以下演示使用的是v1.1.2版本，不同的版本可能存在差异,请自行留意。

3.SPM查找和安装模块

我们先在C盘根目录建立一个assets目录，用于保存前端开发的所有文件。 

先使用spm下载开发需要的模块,spm默认的模块服务器为http://modules.spmjs.org/。 也可以自己在内网搭搭设一个模块服务器，这里不详述。

我们可以先使用spm search命令在模块服务器查找可安装的模块的版本。

C:\assets>spm search seajsC:\assets>spm search jquery  C:\assets>spm search mustache //以mustache为例子    ...    versions:                //这里列出可用的版本   0.4.0:     - mustache.js   0.5.0:     - mustache.js root:     gallery  //显示模块的跟目录 name:     mustache tag: type:C:\assets>spm install seajs@1.2.1     //指定安装seajs版本C:\assets>spm install gallery.jquery  //不指定版本号，默认安装服务器上jquery最新版本C:\assets>spm install gallery.mustache //不指定版本号，默认安装服务器上mustache最新版本

最近模块服务器的目录结构有调整，jquery路径安装变为gallery.jquery,mustache安装路径为gallery.mustache

执行完上面的模块安装命令，在assets目录里面会多了sea-modules目录，里面有seajs和下载下来的模块。

4.SPM测试目录和文件

我们这里设定的整个开发目录结构为：

C:\assets>tree  /f文件夹 PATH 列表卷序列号为 4421-1F56C:.     //这里表示当前目录C:\assets，存放前端的所有文件├─sea-modules  //通过spm安装后自动生成的目录│  ├─seajs│  │  └─1.2.1│  │          plugin-less.js│  │          plugin-base.js  //插件的基类│  │          plugin-combo.js│  │          plugin-debug.js│  │          plugin-i18n.js  //全球化组件，后面的例子有用到│  │          plugin-json.js│  │          plugin-coffee.js│  │          plugin-reload.js│  │          plugin-storage.js│  │          plugin-text.js  //文件组件，读取模版文件│  │          sea-debug.js│  │          sea.js│  │          package.json│  └─gallery│      ├─jquery     //这个做什么的不用说了吧│      │  └─1.8.3│      │      │  jquery-debug.js│      │      │  jquery.js│      │      │  package.json│      │      ││      │      └─gallery│      │              jquery.tgz│      ││      └─mustache   //前端模版类库│          └─0.5.0│                  mustache-debug.js│                  mustache.js│                  package.json│└─apps           业务开发的总目录，通用的模块开发可能会建立src和test目录，    │            这里只是演示spm的使用，所以采用自定义的开发目录结果。    └─hello 该目录存放html页面和spm build需要的package.json。        │  index1.html           这是引用为未部署的js模块的样例。        │  index_module.html     这里是引用已部署的js模块的样例。           │  package.json          spm build的参数文件，类似ant的build.xml。        │        └─js  该目录存放业务开发的模块文件，这里以hello-seajs的文件原例，简单修改了下。            │  main.js            │  spinning.js            │            ├─tpl (这里存放业务模块开发需要用的模版文件）            │      userinfo.tpl            │            └─i18n （这里存在全球化的资源文件）                │  lang.js 默认语种资源文件                │                └─zh-cn                        lang.js  中文语种资源文件

假定我们已经完成上面的业务开发，现在我们的任务是把js目录下的所有文件打包部署到sea-module里面，并且对js文件做压缩。 然后修改index.html的路径的url，就可以引用部署好的模块。

注意i18n的lang文件和模版文件不支持浏览器从本地读取，需要部署到nginx或者tomcat等web服务器中访问。

//如果是nginx,可以参考下面的配置，nginx/conf/nginx.conf里面server区段 server {        listen       80;           //端口        server_name  localhost;   //主机地址        #charset koi8-r;        #access_log  logs/host.access.log  main;        location / {            autoindex  on;      //打开目录和文件浏览功能            root   c:/assets;   //路径在这里            index  index.html index.htm; //开始文件            autoindex_exact_size on; //显示文件大小            autoindex_localtime  on; //显示文件时间        }       }

5.SPM打包部署

谈到部署，就不能不涉及package.json文件，下面是本例的打包配置文件。

{    "name": "hello-seajs",    "version": "1.0.0",    "dependencies": {        "jquery": "gallery/jquery/1.8.2/jquery"，    },    "root": "apps",    "output": {        "main.js": ".",        "i18n": "i18n/**/*.js",        "tpl": "tpl/**/*.tpl"    },    "spmConfig": {            "build": {            "src": "js",            "to": "../../sea-modules/{
    {root}}/{
    {name}}/{
    {version}}"        }    }}

其中spmConfig用于制定命令相关的参数，如上制定了spm build 的src和to两个参数。 

src表示javascript代码所在的路径。 

to表示打包后拷贝到什么地方。 

上面定义的root,name,version都在打包的时候引用到，用于构建打包的完整路径。

output定义了输出的结果和形式。具体output参数解释见https://github.com/spmjs/spm/wiki/package.json-:-output。 

这里表示js目录文件都合并为一个main,js并压缩。其他的i18n文件和tpl文件需要复制过去。

dependencies 指明业务代码所依赖的模块，打包过程中据此进行依赖替换。 这里相当于seajs.config中alias的定义，拷贝过来的时候要注意字符的单引号改为双引号。 

注意：json文件的key和value都是双引号。

更多参数可以查阅spm help build。

C:\assets>spm help buildBUILD CMD MODULEusage: spm build [options]Options:  --only                     only execute current phrase plugin.  --global-config            use user custom config.  --base                     set base directory.                       [string]  [default: "C:\\assets"]  --src                      set src directory.                        [string]  --dist                     set dist directory.                       [string]  --source                   set source server.  --version                  set module version.                       [string]  --source-files             set directory which need to compile.      [default: null]  --throwErrorOnDepNotFound  throw error when dependencies not found.  [boolean]  [default: false]  --with-debug               add debug file.                           [string]  [default: "debug"]  --timeout                  Set request service time delay            [default: 6000]  --verbose, -v              Show more verbose information.            [default: 2]  --encoding                 Set file encoding!                        [default: "utf8"]

我们切换到有package.json的目录执行spm build,spm会读取该目录下的package.json文件。

C:\assets\apps\hello>spm build

build过程中会有Not Found i18n!lang dependency!的警告，不用理会。 

实际上代码运行的时候我们会在seajs.config中配置好preload的插件，不会有影响。 

build结束后在sea-modules/apps/hello/1.0.0/产生相应的代码文件，业务js文件合并到main.js。

C:\assets\sea-modules>tree apps /f

执行上面的命令，可以查看build的输出结果。

C:\ASSETS\SEA-MODULES\APPS└─hello    └─1.0.0        │  main.js         //spinning.js 合并到main.js中。        │  main-debug.js   //没有压缩的js文件，主要用于调试。        │        ├─i18n        │  │  lang.js        │  │        │  └─zh-cn        │          lang.js        │        └─tpl                userinfo.tpl

具体引用文件的变化，可以通过Chrome调试器中Source窗口查看引用文件的路径。 

总结：这里只是spm工具简单使用的例子，更多的使用方式请参考相关的文档。

http://web322-szb.iteye.com/blog/1734863