从 RequireJS 到 SeaJS（3）-白红宇

从 RequireJS 到 SeaJS（3）

阅读量：6001 次

发布时间：2019-06-20

本文共 2010 字，大约阅读时间需要 6 分钟。

来看 RequireJS 的 API 页面：, 该篇博客着重分析 RequireJS 和 SeaJS 在 ID 规则上的异同。

RequireJS 的 ID 规则

对于模块加载器来说，模块 id 遵守的规则非常重要。

首先来定义几个概念。假设当前页面路径为 , 则：

pageRoot =

pageUrl =

baseUrl: 在 RequireJS 里，默认情况下，baseUrl 就是 pageUrl, 除非：
- 通过 require.config 更改了 baseUrl
- 指定了 data-main, 比如
  这时 baseUrl 为 pageUrl/scripts

paths: 表示路径的缩写，通过 config 来配置：
```
require.config({ paths: { 'some': 'xxx/zzz' } })
```
这时，some/a 实际上代表 xxx/zzz/a

moduleUrl: 如果模块路径为 , 则 moduleUrl =

RequireJS 的 id 规则为：首先，会通过 paths 解析，解析完成后：

是 Page ID：
- 以 .js 结尾的，比如 some/a/b.js
- 以 / 开头的，比如 /a/b
- 以 http(s):// 开头的
Page ID 的解析规则与 script src="xxx" 中的 xxx 一样。

是 some/module 这种 Top-Level ID, 会解析成 baseUrl/some/module.js

是 ./some/module 这种 Relative ID, 会解析成 moduleUrl/some/module.js

SeaJS 的 ID 规则

文档：

SeaJS 的 ID 规则可以总结为：

1. 省略约定：.js 后缀可以省略。 require('path/to/a.js') 和 require('path/to/a') 是一样的。

环境相关: 除了 Top-Level ID 始终相对 baseUrl 来定位，其他 ID 都是相对当前环境来定位。

举例如下：

// 在 http://t.com/test.html 中：seajs.use(['./a', 'b', 'c.js', '/d', 'http://x.com/e']);// 会下载// http://t.com/a.js// baseUrl/b.js// baseUrl/c.js// http://t.com/d.js// http://x.com/e.js// 在 http://cdn.com/path/to/t.js 中：define(function(require) {  require('./a');  require('b');  require('c.js');  require('/d');  require('http://x.com/e');});// 会下载// http://cdn.com/path/to/a.js// baseUrl/b.js// baseUrl/c.js// http://cdn.com/d.js// http://x.com/e.js

可以看出，在 SeaJS 里，ID 可以分成两类：

Top-Level ID: some/module 这种，会根据 baseUrl 来定位。

Context ID: 除了 some/module 之外的所有形式，会根据当前环境来定位。

ID 规则对使用体验的影响

RequireJS 里有 Page ID 的概念，和浏览器解析 src 的规则保持一致。

SeaJS 里则有省缺 .js 后缀的约定，和 CommonJS 以及 NodeJS 的约定保持一致。

这个取舍，使得 RequireJS 的 ID 更接近文件路径，SeaJS 的 ID 则更接近模块标识。

这其实是由两者的定位决定的：RequireJS 想同时是文件和模块加载器，SeaJS 则只专注于模块加载器。

当采用 Simplified CommonJS Wrapper 格式时，RequireJS 和 SeaJS 的解析规则基本一致：

                         
// xxx/to/a.js
define(function(require, exports, module) { 
  
require('a'); // baseUrl/a.js
  
require('./b'); // xxx/to/b.js
  
require('./b.js'); // xxx/to/b.js
});