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

之前分享过一篇关于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环境变量，如下图：

初始化的时候，按照提示，输入相关信息即可。初始化完成之后，会在当前目录生成 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

• - 项目文件夹

此时目录结构为：

7、运行

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

 
 
<script src="./dist/seajs/2.2.1/dist/sea.js"></script>
<script>
seajs.config({
    base: './dist'
});
seajs.use('spm/1.0.0/index-debug', function(fn) {
    fn();
});
</script>

这里有2个注意点：

1. base为项目脚本启动目录，就是构建目录。

2. use主模块为项目启动模块，模块名称必须和模块的ID一致。

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

8、参考资料

• spm3官网：  http://spmjs.io/

• spm-build-deps：  https://github.com/hotoo/spm-build-deps

• seajs官网：  http://seajs.org/docs/