配置

[lifesinger]

配置

可以对 Sea.js 进行配置，让模块编写、开发调试更方便。

---

seajs.config seajs.config(options)

用来进行配置的方法。

seajs.config({

  // 别名配置
  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,

  // Sea.js 的基础路径
  base: 'http://example.com/path/to/base/',

  // 文件编码
  charset: 'utf-8'
});

支持以下配置选项：

alias Object

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

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 来简化书写。

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 变量来配置。

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

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

seajs.config({
  map: [
    [ '.js', '-debug.js' ]
  ]
});

define(function(require, exports, module) {

  var a = require('./a');
     //=> 加载的是 path/to/a-debug.js

});

更多用法可参考：调试实践

preload Array

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

// 在老浏览器中，提前加载好 ES5 和 json 模块
seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});

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

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

seajs.config({
  preload: 'a'
});

// 在加载 b 之前，会确保模块 a 已经加载并执行好
seajs.use('./b');

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

seajs.config({
  preload: 'a'
});

define(function(require, exports) {
  // 此处执行时，不能保证模块 a 已经加载并执行好
});

debug Boolean

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

base String

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

在 seajs@2.3.0 之前，Sea.js 会根据 sea.js 的路径去猜测 base 路径，一般为路径上含有 seajs 字符串的上一级路径。在 seajs@2.3.0 后，去掉了这个模糊的猜测。我们推荐始终手动设置一个准确的 base 路径。

charset String | Function

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

charset 还可以是一个函数：

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 可以多次运行，每次运行时，会对配置项进行合并操作：

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 运行的结果是：

 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 页面上，也可以独立出来成为一个文件。

config.js

seajs.config({
  ...
});

独立成一个文件时，一般通过 script 标签在页面中同步引入。

---

常用的配置项是 alias、paths、base，其他配置项有需要时，来查查文档就会用了。

[lifesinger]

有任何问题，欢迎留言交流。
注意：已解决的问题，会在整理后删除掉。

[peirancao]

2.1.0 preload seajs插件的时候必须得这样写吗? preload: ['seajs/seajs-combo/1.0.0/seajs-combo']

为什么不能像 事例中的那样 写啊 preload:['seajs-combo']

[afc163]

因为要指明版本吧。

[lifesinger]

@caopeiran 也可以

seajs.config({

  alias: {
    "seajs-combo": "seajs/seajs-combo/1.0.0/seajs-combo"
  },

  preload: ["seajs-combo"]

})

[chenjie-cnooc]

alias与path 有区别吗?

[lifesinger]

@chenjie-cnooc 有区别，看文档哦

[antife-yinyue]

seajs.config({
  map: [
    [ '.js', '-debug.js' ]
  ]
})

这样的配置，没有完全匹配 js 文件，连 require('text!foo/bar') 也会加上时间戳

[lifesinger]

@jsw0528 试了下，不会呀。这和时间戳没关系，是将 xx.js 替换为 xx-debug.js

[antife-yinyue]

@lifesinger

哎呀，我代码贴错了，呵呵

seajs.config({
  map: [
    [".js", ".js?" + new Date().getTime()]
  ]
})

现在这样跟 #264 (comment) 的简易 nocache 插件 效果一样了，全局替换

[lifesinger]

这个应该不会匹配 require('text!foo/bar') 的呀，我试了下，是没问题的。如果有问题，map 写正则，写复杂一些。

[antife-yinyue]

[lifesinger]

@jsw0528 感谢反馈，的确是 bug，已解决 seajs/seajs-text#2

spm install seajs/seajs-text

更新到 1.0.1 版本解决。

[pythonsir]

当整合jquery.js,bootstrap.js等插件的时候，是否也要改造这些插件？希望出一些关于插件整合的文档。
define(function(require, exports, module){
....
//jquery源码或者bootstrap源码
....
})

[edokeh]

@javabird
曾经想把所有 Bootstrap jQuery 插件都改成模块，后来放弃了，还是用最简单的 patch jquery 的方式
因为有几个插件不太好改

[junxy]

能不能支持 base: 'http://example.com/path/to/base/' 分组？
即为不同的 alias 指定至不同的 base 配置？
e.g

...
alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    base: 'http://a.example.com/path/to/base/'
  },
alias: {
    'jquery': 'jquery/jquery/1.10.1/jquery',
    base: 'http://b.example.com/path/to/base/'
  },
...

[pythonsir]

多个alias，最后会合并为一个。也就是说你设置多个base是没有意义的。个人感觉，一个项目设置一个固定的根目录base.比如：base:http://localhost:8080/base/.

[afc163]

https://guides.github.com/features/mastering-markdown/

[tvrcgo]

把 bootstrap 直接做成模块内加载也方便啊

module/bootstrap.js :
define(function(require, exports, module){
require('seajs-css');
require.async('jquery');
require.async("http://cdn.staticfile.org/twitter-bootstrap/3.2.0/js/bootstrap.min.js");
require.async("http://cdn.staticfile.org/twitter-bootstrap/3.2.0/css/bootstrap.min.css#");
});

然后再 index.html 中调用就全部加载了：
seajs.use('module/bootstrap');

[best-zhao]

请问paths路径配置 在grunt中对应哪个配置， 不然无法正确提取依赖啊

[yyman001]

请问sea.js 多少版本 可以在 js 里面设置 config,而不是在页面设置config?

[BruceCham]

@afc163 现在安装spm指定@2.x版本可以，直接npm install spm -g就会失败，安装插件后spm build不能用，只能用spm-build，配置文件修改后也无效。
默认安装后，在user目录下没有生成相应的spmrc文件，spm-build执行不起来
请问这些问题有文档说明吗？

[afc163]

https://docs.npmjs.com/getting-started/fixing-npm-permissions

[lay139217]

为什么我用
seajs.use(['jquery','customjs/user/login'],function($){
$(function(){
$("#test").userLogin();
});
});
报
http://192.168.1.103:8080/assets/js/seamodules/seajs/2.3.0/common-plugin/jquery/1.11.2/jquery.js?20150113 404 (Not Found) ，
不是说带版本号的seajs的基路径是 http://192.168.1.103:8080/assets/js/seamodules/这一段吗

[rebornvip]

加载jquery mobile 由于放在底部，加载时会闪一下，因为先加载了内容后才启用mobile，如何在页面加载前就引入呢？加载顺序问题，请帮忙点点。

[Tonyee]

老师，在单页模式应用中，首页加载好之后，点击相应链接加载一个模块页面之后使用seajs.use("business/userInfo")请求这个模块页的js文件，js中是一些ajax请求，用于页面内容初始化；若这时我返回上一页，然后再点击相应链接进入这个模块页，此时也是使用seajs.use("business/userInfo")来请求相应js初始化页面，但是因为这是单页模式应用，重新进入这个模块页时因为userInfo.js已经存在，所以seajs.use("business/userInfo")并没有再次加载，这时这个模块页的内容就是空的，我应该怎么再次初始化这个页面的内容？

[wushilong]

为什么不能在config里面配置各个插件的依赖关系嘞,感觉很实用啊!

[lyndonliao]

说明文档是老版本的了，3.0 不是已经不支持preload配置了么

[myqldx]

不太懂config配置里面alias和paths的区别？

[guohuihot]

alias和paths有什么实质的区别,别说让看文档,看懂了就不在这里问了

[pingmac]

真好的东西，特来支持下

[hskww]

有个问题，文件加载成功，但里面代码没执行，导致后面使用时这个模块是null,后面发现是base配置有问题只能是当前根目录，不能再加层级，这算是个大坑吧

[qianet]

请教这么一个问题:
譬如我有一个大模块(像Jquery Easyui)
可否在配置中设定: 本模块使用的时候是需要批量加载其中的2个js文件2个css文件.
在页面中使用的时候, 只要写一个sea.use("easyui")...就同时加载和这个模块设定有关的所有js和css文件?

[zhishaofei3]

@qianet 数组吧 sea.use(['.css', '.js'], function(css, js){});

[qianet]

@zhishaofei3 好的,多谢,我尝试下看看.

[qianet]

请教这么一个问题, 我的web程序前段是: html+js+css的.
遇到文件客户端缓存的问题.
即: 即使我在config中变更了js文件的版本号.
但是, html文件是没有变化的.
那么, 客户端访问的时候, html是用的客户端缓存. 导致加载的js文件依然还是老版本的js文件
这个问题如何解决呢?
难道, 我的每个页面的sea-config.js文件都不使用缓存? 这个可以解决其他js文件的缓存.
但是config文件每次都是请求新的.

[hi-zhaolei]

@qianet 你确定config文件每次都是请求新的？如果那样配置map之后不应该有缓存，你遇到的问题是因为html文件没有修改，所以加载的config文件一直都是缓存，所以即使config修改也不会加载新版本的js文件。所以你需要修改的不是config.js而是html的入口文件的缓存。你可以吧seajs.config在html里也写一个，只配置map，对所有文件添加时间戳后缀，然后使用seajs.use()，又或者直接将入口文件<script>引入html中，直接给入口文件添加时间戳，都是可以的。
ps. 你的上一个问题，你想要自动加载，可以吧css,js写到easyui的源码里，外面包一层，require就好了。如果不想修改库文件方便之后更新，可以单写一个模块，比如叫easyuixxx，只做模块整合，require你想要的css和js，exports你想要的接口，以后想加载的时候加载easyuixxx就好了

[jeff6957]

我遇到了一个问题，就是这种写法 require('../css/loading.css'); 写的引入的css默认会在后面加 .js ;变成 loading.css.js 不知道怎么解

[ericyin168]

define(function (require) {
var $ = require('jquery')
alert($);//null
});
define('init', ['jquery'], function (require) {
var $ = require('jquery')
alert($); //null
});
就是想在init文件内使用jquery的方法而已，怎么就这么多问题。有没有一些思路说的比较清晰的案例参考》
不论是按照ID标识，还是以匿名的方式$对象都为null
报错：Uncaught TypeError: Cannot read property 'onUpdated' of undefined

[ericyin168]

define('init', ['jquery'], function (require) {
var $ = require('jquery')
alert($); //null
});
以上代码是在init.js内，也就是程序的入口。那么define('第一参数',['第二参数'],function(){});
第一参数到底是jquery的文件路径，还是init的文件路径？
第二参数应该指的是init.js的依赖？
查了很多案例，每个人写的都不一样，尤其是涉及到路径，毕竟每个团队项目的文件路径肯定不是一样的，一旦牵扯到路径，真实太麻烦。而且不知道错误在哪。
谁能来指点一下，快被被搞疯了...

[ericyin168]

同上一个朋友问的，文件加载了，但是使用模块时一直提示对象null，
比如:
define(function (require) {
var $ = require('jquery')
alert($);//null
});
直接在jquery文件内调试，发现文件已经被加载。

[elma-cao]

你是不是模块id不对呀，你比对一下

[baiduoduo]

@ericyin168 jquery.js没有模块化，我是这样解决的
define(function(){
[省略，这里全是jqueryv1.11.3的代码，代码完成后接下一句]
return $.noConflict(true);
});