node.js npm 安装spm失败,竟然是版本的问题
2015-02-06 10:05
796 查看
SPM v.1.1.2 With SeaJS
SPM v1.1.2使用指南
1.SPM用途
SeaJS提供了模块化开发的机制,在代码开发完后,还需要做产品发布相关的一些操作。 这些可以通过SPM来完成,SPM提供了模块安装、压缩、打包部署等功能。2.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版本,不同的版本可能存在差异,请自行留意。
3.SPM查找和安装模块
我们先在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和下载下来的模块。
4.SPM测试目录和文件
我们这里设定的整个开发目录结构为: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; //显示文件时间 } }
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 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
相关文章推荐
- 解决国内NPM(node.js)安装依赖速度慢问题
- 使用nvm管理node版本时,各个版本下公用npm安装的插件问题
- 记录一下今天安装node.js以及npm install的一些问题
- 安装node.js和npm推荐版本的报错 can't find the npmlog file
- 解决最近windows版本Node.js中npm出现的“Error: ENOENT, stat 'C:\Users\UserName\AppData\Roaming\npm”的问题
- 解决国内NPM(node.js)安装依赖速度慢问题
- 关于electron安装失败问题解决方法(node.js开发桌面应用)
- 国内npm安装nodejs modules失败的几个解决方案
- 在node.js的命令行里通过npm安装phonegap出现connect etimeout问题
- 【puppeteer+Node.js安装环境】之WebStorm编辑器运行失败问题:Error: Cannot find module 'puppeteer'并且代码出不来“asnyc”标识以及有红色波浪线解决办法
- 解决国内NPM(node.js)安装依赖速度慢问题
- 关于npm安装node.js第三方依赖的问题
- node.js中npm的安装问题
- ubuntu14.04安装node.js,升级npm,安装指定版本的npm
- [nodejs]国内npm安装nodejs modules失败的几个解决方案
- [nodejs]国内npm安装nodejs modules失败的几个解决方案
- [nodejs]国内npm安装nodejs modules失败的几个解决方案
- linux下面配置安装nodejs+npm
- node.js npm的安装(安装forever)
- Node.js 笔记(一) nodejs、npm、express安装