JS学习43：如何用spm@3构建一个多入口、模块化编程项目

1、项目结构

一个典型的本地JS目录结构：

当前项目中有2个页面，分别是page-a和page-b，两个页面有两个入口。项目使用的公共文件在libs文件夹下面，项目可能还需要用到jquery等第三方库文件，这些文件可以在spmjs.io上面下载下来，此话后说。

2、项目配置

在当前JS目录新建package.json文件，来配置当前项目需要用到的库以及打包依赖。

 
 
{
    "name": "my-project",
    "version": "1.0.0",
    "spm": {
        "main": "page-a.js",
        "output": ["page-b.js"],
        "dependencies": {}
    },
    "description": "项目描述"
}

上述信息主要描述了项目的重要信息，包括名称、版本号、SPM打包信息以及描述信息，其中版本号必须是A.B.C这种结构，SPM打包信息里包含了：主文件，以及其他出口文件和依赖模块。项目中不止一个入口的话，可以在output字段里填写其他入口文件。如果项目中需要用到第三方模块的话，可以在spmjs上下载下来，推荐使用以下方式下载：

 
 
spm install jquery@1.10.2 --save

这种方式会将jquery指定版本下载到本地，并在package.json里保存了依赖信息：

 
 
{
    "name": "my-project",
    "version": "1.0.0",
    "spm": {
        "main": "page-a.js",
        "output": ["page-b.js"],
        "dependencies": {
        	"jquery": "1.10.2"
        }
    },
    "description": "项目描述"
}

3、构建过程

如果项目中使用到了第三方模块，那么我们需要先将第三方模块构建到本地：

 
 
spm-build-deps

构建之后的目录结构为：

此时会在当前目录生成dist目录，这是默认目标目录，是当前项目构建之后的目录。

然后我们将本地项目构建：

 
 
spm build

构建之后的目录结构为：

4、参考文章

SPM入门参考：JS学习42：使用spm@3构建seajs项目。