标签:
SeaJS提供了模块化开发的机制,在代码开发完后,还需要做产品发布相关的一些操作。 这些可以通过SPM来完成,SPM提供了模块安装、压缩、打包部署等功能。
1.从nodejs官网下载最新版本的node。 这里以node-0.8.14为例,直接下载windows版本的安装包即可,默认安装到"C:\Program Files\nodejs", 会自动添加到path中,查看一下版本。
C:\Documents and Settings\Administrator>node -v
v0.8.14
2.新版的node都带了npm,这里通过npm来安装spm。下面指定安装1.1.2版本,在当前为最新版本。 如果不指定版本号,默认安装最新版本。安装包大小为11.8M,根据网速不同,请耐心等待。
C:\Documents and Settings\Administrator>npm install spm@1.1.2 -g
npm http GET https://registry.npmjs.org/spm/1.1.2
npm http 200 https://registry.npmjs.org/spm/1.1.2
npm http GET https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http 200 https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http GET https://registry.npmjs.org/spm-env
npm http GET https://registry.npmjs.org/csslint
npm http GET https://registry.npmjs.org/async
...
下载完spm后,会根据压缩包中的package.json自动安装相关的依赖包,最后会显示如下的界面。
C:\Documents and Settings\Administrator\Application Data\npm\spm -> C:\Documents and Settings\Administrator\Application
Data\npm\node_modules\spm\bin\spm
spm@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 -v
v1.1.2
如果这种方式安装比较慢,可以git 源码后安装,详见官方文档。
本次测试使用的是Widnows XP操作系统
以下演示使用的是v1.1.2版本,不同的版本可能存在差异,请自行留意。
我们先在C盘根目录建立一个assets目录,用于保存前端开发的所有文件。
先使用spm下载开发需要的模块,spm默认的模块服务器为http://modules.spmjs.org/。 也可以自己在内网搭搭设一个模块服务器,这里不详述。
我们可以先使用spm search命令在模块服务器查找可安装的模块的版本。
C:\assets>spm search seajs
C:\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和下载下来的模块。
我们这里设定的整个开发目录结构为:
C:\assets>tree /f
文件夹 PATH 列表
卷序列号为 4421-1F56
C:. //这里表示当前目录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; //显示文件时间
}
}
谈到部署,就不能不涉及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 build
BUILD CMD MODULE
usage: 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
标签:
原文地址:http://www.cnblogs.com/shenggen/p/4276470.html