對 Sea.js 進行配置 seajs.config

能夠對 Sea.js 進行配置,讓模塊編寫、開發調試更方便。html


seajs.config seajs.config(options)

用來進行配置的方法。jquery

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'});

支持如下配置選項:git

alias Object

當模塊標識很長時,可使用 alias 來簡化。github

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,可讓文件的真實路徑與調用標識分開,有利於統一維護。json

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 配置一塊兒使用,讓模塊引用很是方便。app

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} 來表示變量。ui

map Array

該配置可對模塊路徑進行映射修改,可用於路徑轉換、在線調試等。this

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 路徑來解析。詳情請參閱 模塊標識

注意:通常請不要配置 base 路徑,把 sea.js 放在合適的路徑每每更簡單一致。

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 標籤在頁面中同步引入。


經常使用的配置項是 aliaspathsbase,其餘配置項有須要時,來查查文檔就會用了。

相關文章
相關標籤/搜索