JS学习42：使用spm@3构建seajs项目

客官°小女子只卖身不卖艺 2022-07-15 11:15 101阅读 0赞

之前分享过一篇关于seajs入门的文章（见：  [JS学习21：seaJS入门][JS_21_seaJS]），因为当时build工具不成熟吧，就没有继续研究。现在，随着项目越来越大，引用的脚本越来越多，单纯的靠记忆来管理依赖已经不太现实，也比较劳累。

# 1、什么是spm #

起初我以为是 seajs package manager，结果官网的定义是 static package manager，它是静态包的管理工具。虽然目标有些大吧，但目前它最多的功能只是被用作seajs的构建。相比之下，静态资源管理工具，有很多，比如bower，它的知名度可比spm要大的多，并且静态资源数量也不够，访问速度也不快。

# 2、安装spm #

为什么标题说明是spm3呢？据spm的Github项目介绍，spm3与之前的版本相差有些大，基本不兼容，不过可以从spm2过渡到spm3，这里不做赘述。本文只说明如何在windows下用spm3构建一个Hello World！

在使用spm之前，首先得安装nodejs，因为spm是nodejs的一个package。

使用命令

npm install spm -g

来全局安装 spm。安装完成之后，可以在cmd窗口输入 spm 便会输出提示信息。

# 3、初始化 #

spm初始化和npm初始化一致，在当前脚本目录下执行

spm init

即可。如果这里出现NODE\_PATH未设置的错误信息，需要先设置NODE\_PATH环境变量，如下图：![20140714132008597994916351.png][]

初始化的时候，按照提示，输入相关信息即可。初始化完成之后，会在当前目录生成 package.json 文件，这个文件和 npm 的 package.json 一致，是用于包管理的配置。

注意：这个里的name名称最好是比较生僻的字符，不要与你引入的模块名称重复，因为后期要将依赖包构建到同级目录的。

# 4、安装模块 #

安装模块与安装npm模块一样，但是命令稍有不同：

spm install jquery --save

没有 -S快捷方式，使用`--save`参数，是在安装jquery模块的时候，同时也把依赖信息加到package.json文件里了。安装完成之后，会在package.json同级目录创建sea-modules文件夹，jquery模块就在里面。此时package.json文件的依赖信息会发生变化，package.json文件主要有以下信息：

{ 
         "name": "spm",           // 项目名称
         "version": "1.0.0",      // 版本号
         "spm": {                 // spm配置
             "main": "index.js",  // 入口文件
             "dependencies": {    // 依赖模块
                 "seajs": "2.2.1",
                 "jquery": "2.1.0"
             }
         }
       }

# 5、项目代码 #

在当前目录，再新建两个文件  config.js：

module.exports = { 
           text: 'Hello World!'
       };

index.js文件为：

var config = require('./config');
       var $ = require('jquery');
       module.exports = function() { 
           $('body').html(config.text);
       };

此时的文件目录是这样的：

*  \- sea-modules
 *  \- config.js
 *  \- index.js
 *  \- package.json

# 6、构建 #

A、构建当前项目

使用构建当前项目，构建之后会在当前目录生成dist文件夹，dist文件包含了index-debug.js和index.js。

B、构建依赖模块

这一步的作用是，根据package.json文件依赖描述，把所有的依赖文件都构建到 dist 文件夹里。因为这里需要用到seajs，因此也需要把seajs加到依赖里面去。完整的依赖为：

"dependencies": { 
           "seajs": "2.2.1",
           "jquery": "2.1.0"
       },
       "devDependencies": {},

为了快速构建依赖模块，把其他不需要的模块都删掉，只留下seajs和jquery。在构建依赖模块之前，我们需要安装另外一个npm模块：

npm install spm-build-deps -g

安装完成之后，在当前目录执行：

spm-build-deps

A、B两步构建完了之后，在dist文件夹下有：

*  \- jquery
 *  \- seajs
 *  \- 项目文件夹

此时目录结构为：

![20140714143600668066078420.png][]

# 7、运行 #

页面里引入seajs和使用入口模块：

这里有2个注意点：

1.  base为项目脚本启动目录，就是构建目录。
2.  use主模块为项目启动模块，模块名称必须和模块的ID一致。

然后在浏览器打开，就会看到久违的”Hello World!”了。

# 8、参考资料 #

*  spm3官网：  [http://spmjs.io/][http_spmjs.io]
 *  spm-build-deps：  [https://github.com/hotoo/spm-build-deps][https_github.com_hotoo_spm-build-deps]
 *  seajs官网：  [http://seajs.org/docs/][http_seajs.org_docs]

[JS_21_seaJS]: http://qianduanblog.com/post/js-learning-21-start-seajs.html
[20140714132008597994916351.png]: http://qianduanblog.com/uploads/post/20140714132008597994916351.png
[20140714143600668066078420.png]: http://qianduanblog.com/uploads/post/20140714143600668066078420.png
[http_spmjs.io]: http://spmjs.io/
[https_github.com_hotoo_spm-build-deps]: https://github.com/hotoo/spm-build-deps
[http_seajs.org_docs]: http://seajs.org/docs/