seajs之config

本文介绍 seajs 的配置方式。

seajs.config() 模块系统配置

同样的, seajs 也可以进行配置。使用 seajs.config 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

seajs.config({

// 模块加载基础路径

base: 'http://example.com/path/to/base/',

// 别名配置

alias: {

'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',

'json': 'gallery/json/1.0.2/json',

'jquery': 'jquery/jquery/1.10.1/jquery'

},

// 路径配置

paths: {

'gallery': 'https://a.alipayobjects.com/gallery'

},

// 变量配置

vars: {

'locale': 'zh-cn'

},

// 映射配置

map: [

['http://example.com/js/app/', 'http://localhost/js/app/']

],

// 预加载项

preload: [

Function.prototype.bind ? '' : 'es5-safe',

this.JSON ? '' : 'json'

],

// 调试模式

debug: true,

// 文件编码

charset: 'utf-8'

})

seajs.config详细说明

alias [Object]

当模块标识很长时,可以使用 alias 来简化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

seajs.config({

alias: {

'jquery': 'jquery/jquery/1.10.1/jquery',

'app/biz': 'http://path/to/app/biz.js',

}

});

define(function(require, exports, module) {

var $ = require('jquery');

//=> 加载的是 http://path/to/base/jquery/jquery/1.10.1/jquery.js

var biz = require('app/biz');

//=> 加载的是 http://path/to/app/biz.js

});

使用 alias,可以让文件的真实路径与调用标识分开,有利于统一维护。

paths [Object]

当目录比较深,或需要跨目录调用模块时,可以使用 paths 来简化书写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

seajs.config({

paths: {

'gallery': 'https://a.alipayobjects.com/gallery',

'app': 'path/to/app',

}

});

define(function(require, exports, module) {

var underscore = require('gallery/underscore');

//=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js*

var biz = require('app/biz');

//=> 加载的是 path/to/app/biz.js*

});

paths 配置可以结合 alias 配置一起使用,让模块引用非常方便。

vars [Object]

有些场景下,模块路径在运行时才能确定,这时可以使用 vars 变量来配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

seajs.config({

vars: {

'locale': 'zh-cn'

}

});

define(function(require, exports, module) {

var lang = require('./i18n/{locale}.js');

//=> 加载的是 path/to/i18n/zh-cn.js

});

vars 配置的是模块标识中的变量值,在模块标识中用 {key} 来表示变量。

map [Array]

该配置可对模块路径进行映射修改,可用于路径转换、在线调试等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

seajs.config({

map: [

[ '.js', '-debug.js' ]

]

});

define(function(require, exports, module) {

var a = require('./a');

//=> 加载的是 path/to/a-debug.js

});

preload [Array]

使用 preload 配置项,可以在普通模块加载前,提前加载并初始化好指定模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 在老浏览器中,提前加载好 ES5 和 json 模块

seajs.config({

preload: [

Function.prototype.bind ? '' : 'es5-safe',

this.JSON ? '' : 'json'

]

});

preload 中的空字符串会被忽略掉。

注意:preload 中的配置,需要等到 use 时才加载。比如:

1
2
3
4
5
6
7
8
9
10
11

seajs.config({

preload: 'a'

});

// 在加载 b 之前,会确保模块 a 已经加载并执行好

seajs.use('./b');

preload 配置不能放在模块文件里面:

1
2
3
4
5
6
7
8
9
10
11
12
13

seajs.config({

preload: 'a'

});

define(function(require, exports) {

// 此处执行时,不能保证模块 a 已经加载并执行好

});

debug [Boolean]

值为 true 时,加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置,来决策 log 等信息的输出。

base [String]

Sea.js 在解析顶级标识时,会相对 base 路径来解析。详情请参阅 模块标识

注意:一般请不要配置 base 路径,把 sea.js 放在合适的路径往往更简单一致。

charset [String | Function]

获取模块文件时,<script><link> 标签的 charset 属性。 默认是 utf-8

charset 还可以是一个函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

seajs.config({

charset: function(url) {

// xxx 目录下的文件用 gbk 编码加载

if (url.indexOf('http://example.com/js/xxx') === 0) {

return 'gbk';

}

// 其他文件用 utf-8 编码

return 'utf-8';

}

});

注:多次配置自动合并,seajs.config 可以多次运行,每次运行时,会对配置项进行合并操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

seajs.config({

alias: {

'jquery': 'path/to/jquery.js',

'a': 'path/to/a.js'

},

preload: ['seajs-text']

});

seajs.config({

alias: {

'underscore': 'path/to/underscore.js',

'a': 'path/to/biz/a.js'

},

preload: ['seajs-combo']

});

上面两处 config 运行的结果是:

1
2
3
4
5
6
7
8
9
10
11
12
13

alias = {

'jquery': 'path/to/jquery.js',

'underscore': 'path/to/underscore.js',

'a': 'path/to/biz/a.js'

};

preload = ['seajs-text', 'seajs-combo'];

即:config 会自动合并不存在的项,对存在的项则进行覆盖。

插件的配置,插件可以给 Sea.js 添加配置项,请查看具体插件了解相关配置。

配置文件,配置可以直接写在 html 页面上,也可以独立出来成为一个文件。

1
2
3
4
5
6
7
8
9

// seajs.config.js

seajs.config({

...

});

推荐将配置文件独立成一个文件放在项目根目录,方便管理,你可以将它命名为 seajs.config.js,方便区分。