之前分享过一篇关于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个注意点:
-
base为项目脚本启动目录,就是构建目录。
-
use主模块为项目启动模块,模块名称必须和模块的ID一致。
然后在浏览器打开,就会看到久违的”Hello World!”了。
8、参考资料
-
spm3官网: http://spmjs.io/
-
spm-build-deps: https://github.com/hotoo/spm-build-deps
-
seajs官网: http://seajs.org/docs/