`
web322_szb
  • 浏览: 23380 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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工具简单使用的例子,更多的使用方式请参考相关的文档。

本案例的源码见附件中,请部署到webserver中测试。

分享到:
评论

相关推荐

    aal2_for_SPM12.tar.gz_aal2_for_SPM12.tar_fMRI matlab_fmri_spm12

    aal2_for_SPM12.tar.gz_aal2_for_SPM12.tar_fMRI_matlab_fmri_spm12 是一个与神经影像处理相关的压缩包,主要用于功能磁共振成像(fMRI)的数据分析。该文件涉及到的主要工具是aal2和SPM12,它们在神经科学领域具有...

    seajs-css:一个用于加载 css 的 Sea.js 插件

    seajs-cssA Sea.js plugin for loading cssInstallInstall with spm:$ spm install seajs/seajs-cssUsage[removed][removed][removed][removed][removed]// seajs can load css file after loading css plugin.seajs...

    aal2_for_SPM12.tar

    aal2_for_SPM12.tar 是一个专门为SPM12软件设计的模板文件。这个压缩包包含了一个名为"aal"的文件,很可能是一个用于神经影像分析的模板。下面将详细介绍aal模板以及与其相关的SPM12软件。 aal模板是神经影像学领域...

    SPM5.rar_SPM 结构_spm_spm matlab_spm5

    spm5的中文使用文档,spm能够完成对功能图像及其结构图像的处理,文档对初学者很有帮助,可以快速入门。

    Python库 | spm12-0.0.2.tar.gz

    资源分类:Python库 所属语言:Python 资源全名:spm12-0.0.2.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    spm8.rar_SPM8软件公司_spm_spm8_spm8软件下载_计算神经影像

    SPM8是一款功能强大的神经影像计算软件,由 Wellcome Department of Imaging Neuroscience小组开发,可以对PET, EEG, fMRI等图像进行处理。对fMRI 数据的处理可以由预处理,个体统计分析,组分析来实现。

    SPM-SRS.rar_BUPTSSE-SPM-LLD_BUPTSSE-SPM-LLD.pdf_SPM-SRS_spm课程网站_

    《SPM-SRS.rar》是一个压缩包文件,包含着关于SPM(Software Process Management,软件过程管理)课程网站的需求规格说明书。这个文档是BUPTSSE(北京邮电大学软件工程学院)的教学资源,具体文件为《BUPTSSE-SPM-...

    瑞文标准推理测验(SPM).pdf

    瑞文标准推理测验(SPM) 瑞文标准推理测验(SPM)是一种广泛应用于心理学、教育学和人力资源管理领域的评估工具。该测验旨在评估个体的推理能力、逻辑思维能力和问题解决能力。下面是瑞文标准推理测验(SPM)的...

    汽车产品数据https://tianchi.aliyun.com/?spm=5176.12281973.J_3941670930

    汽车产品数据https://tianchi.aliyun.com/?spm=5176.12281973.J_3941670930

    spm.zip_spm_spm power_变频_变频器_变频器 matlab

    标题中的"spm.zip_spm_spm power_变频_变频器_变频器 matlab"提到了几个关键概念,它们是“spm”、“spm power”、“变频”、“变频器”以及“matlab”。这表明这个压缩包可能包含一个与变频技术相关的软件工具,该...

    spm.zip_SPM扰动_small perturbation_spm

    spm.zip中的"SPM扰动"(Small Perturbation Model)是一种在系统动力学建模中广泛应用的概念,尤其在电力系统稳定性分析中占有重要地位。它主要用于研究系统在受到微小扰动后,如何通过数学模型预测系统的行为和动态...

    SPM.rar_open_smart spm_spm c++_无网格法_物质点

    SPM(Smart Preprocess for Meshfree )是C++和OpenGL开发的一套...直接解压缩包可以直接运行SPM.EXE 主程序,使用File->Open Project 打开里面包含两个三维前处理示例文件(ExplosiveSteel.spm和Peneration.spm)

    seajs-wrap:一个Sea.js插件,用于加载CommonJS模块

    $ spm install seajs-wrap 用法 < script src =" path/to/sea.js " > </ script > < script src =" path/to/seajs-wrap.js " > </ script > < script > seajs . use ( [ 'common' ]...

    spm.rar_MATLAB SPM_matlab_薛定谔_spm_薛定谔_薛定谔方程

    标题中的"spm.rar_MATLAB SPM_matlab_薛定谔_spm_薛定谔_薛定谔方程"指的是一个MATLAB程序,该程序用于模拟和处理SPM(Self-Phase Modulation)现象,这是一种非线性光学效应,通常在光纤通信中遇到。SPM是光脉冲在...

    SPM.rar_SPM PET_fmri_fmri spm_pet_spm

    标题中的"SPM.rar_SPM PET_fmri_fmri spm_pet_spm"表明这是一个关于SPM(Statistical Parametric Mapping)软件的压缩包,重点在于它在PET(Positron Emission Tomography)和fMRI(Functional Magnetic Resonance ...

    生命游戏代码V5.0 C++代码

    V1.0: https://blog.csdn.net/weixin_44550335/article/details/120623524?spm=1001.2014.3001.5501 V1.2 https://blog.csdn.net/weixin_44550335/article/details/120623641?spm=1001.2014.3001.5501 V2.0 ...

    SPM.rar_project management_spm

    "SPM.rar_project management_spm"这个压缩包文件,显然是对软件项目管理中的重要知识点进行了整理。下面,我们将深入探讨这些关键知识点,以帮助读者更好地理解和掌握这一领域的核心内容。 1. **项目范围管理**:...

    SPM.rar_MATLABspm软件_SPM matlab 打包_matlab中spm代码_spm_spm是什么matlab

    至于"SPM.caj"文件,它可能是SPM软件包中的一部分文档或数据文件。".caj"文件格式通常与中国的知网(CNKI)关联,用于存储学术文献或资料。在这个上下文中,可能是关于SPM软件使用教程或相关研究的文档,帮助用户更...

Global site tag (gtag.js) - Google Analytics