什么是 spm2
spm2(Short for SPM 2.0)是一个基于 Node.js 的前端构建工具,它可以很方便地帮助我们管理项目依赖、编译、打包、压缩等等。与其他构建工具不同的是,spm2 是由淘宝前端团队开发和维护的,所以对于国内的前端开发者来说,更加友好和实用。
安装和使用 spm2
安装
如果已经安装了 Node.js,可以直接通过 npm 安装:
$ npm install spm@2.x -g
使用
- spmv:在命令行中查看 spm2 的版本信息
$ spmv
- spminit:初始化一个项目
在新建一个项目时,我们需要初始化一个 package.json
的文件,而使用 spm2 可以轻易实现,执行命令:
$ spm init
- spmdep:安装一个依赖
添加一个第三方库到项目中,以 jQuery 为例,执行命令:
$ spm install jquery
- spmtest:使用 phantomjs 进行测试
进行测试时,我们需要启动一个本地服务器并且执行测试命令,以前端测试框架 Mocha 为例:
$ spm test mocha
- spmbuild:构建一个项目
$ spm build
spm2 的指导意义
spm2 的出现,不仅仅是提高了前端开发的效率,而且还给我们带来了很多指导意义:
- 前端脚手架化
npm 包 spm2 能够帮助我们快速构建一个项目基础架构,通过项目初始的目录结构和配置文件,我们可以实现前端脚手架化,提升开发效率。
- 坚持模块化思想
spm2 支持 CommonJS 规范,让我们的代码更加模块化,可以将复杂的前端项目分解为多个独立的模块,方便管理和维护。
- 增强代码可读性
spm2 支持使用 Sea.js,同样也支持 AMD 规范,不过为了和 Node.js 环境的兼容,更建议使用 CommonJS 规范,这样可以使得前后端代码库更加统一和可读。
示例代码
在使用 spm2 进行开发时,可以看到生成了一个 package.json
的文件,这个文件中记录了我们项目的各种信息和依赖,其格式如下:
-- -------------------- ---- ------- - ------- --------------- ---------- -------- -------------- --- ----------- --- ------------- --- --------- --- --------------- - --------- -------- -- ------------------ --- ------- --- ---------- - ------- ----- -------- -- ---- ----------- -- ---- -- -- ---------- ------ ------ - --------- ---------- - -
其中 name
、version
、dependencies
是必须的,其余可选,可以根据项目实际情况自行填写。
在安装了 spm2 后,会生成一个 .spm
的隐藏目录,里面存放了缓存文件和临时文件等。一般不需要手动管理这个目录。
引入项目中的第三方库时,可以像下面这样进行:
var $ = require('jquery');
如果需要引入一个模块,就需要在模块中导出模块,如下示例:
// demo.js module.exports = function (a, b) { return a + b; }
// app.js var foo = require('./demo.js'); console.log(foo(1, 2)); // 输出 3
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111eff0