在顶层HTML页面(或未定义模块的顶层脚本文件)中使用require()时,可以将配置对象作为第一个选项传递:
<script src="scripts/require.js"></script>
<script>
require.config({
baseUrl: "/another/path",
paths: {
"some": "some/v1.0"
},
waitSeconds: 15
});
require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule, myModule) {
//This function will be called when all the dependencies
//listed above are loaded. Note that this function could
//be called before the page is loaded.
//This callback is optional.
}
);
</script>
您也可以从数据主入口点调用require.config ,但是要注意,数据主脚本是异步加载的。避免使用其他入口点脚本,这些脚本错误地假定data-main及其require.config将始终在脚本加载之前执行。
另外,可以require
在加载require.js之前将config对象定义为全局变量,并自动应用值。此示例指定了一些要在require.js定义require()后立即加载的依赖项:
<script>
var require = {
deps: ["some/module1", "my/module2", "a.js", "b.js"],
callback: function(module1, module2) {
//This function will be called when all the dependencies
//listed above in deps are loaded. Note that this
//function could be called before the page is loaded.
//This callback is optional.
}
};
</script>
<script src="scripts/require.js"></script>
注意:最好使用var require = {}
并且不要使用 window.require = {}
,它将在IE中无法正确运行。
支持的配置选项:
baseUrl:用于所有模块查找的根路径。因此,在上面的示例中,“ my / module”的脚本标签将具有src =“ / another / path / my / module.js”。是的baseUrl不装入普通.js文件时使用的(由一个依赖字符串指示开始以斜线,具有协议,或在端部的.js),这些字符串被原样使用,所以a.js和b.js将从与包含上述代码段的HTML页面相同的目录中加载。
如果在配置中未显式设置baseUrl,则默认值将是加载require.js的HTML页面的位置。如果使用data-main属性,则该路径将成为baseUrl。
baseUrl可以是与将加载require.js的页面不同的域上的URL。RequireJS脚本加载跨域工作。唯一的限制是文本加载的文本内容!插件:至少在开发过程中,这些路径应与页面位于同一域中。优化工具将内联文本!插件资源,因此在使用优化工具后,您可以使用引用文本的资源!来自另一个域的插件资源。
path:在baseUrl的正下方找不到模块名称的路径映射。除非路径设置以“ /”开头或其中包含URL协议(例如“ http:”),否则都假定该路径设置是相对于baseUrl的。使用上面的示例配置,“ some / module”的脚本标签将为src =“ / another / path / some / v1.0 / module.js”。
被用于模块名称应该路径不包括扩展名,因为路径映射可能是一个目录。当将模块名称映射到路径时,路径映射代码将自动添加.js扩展名。如果使用了require.toUrl(),它将添加适当的扩展名(如果用于文本模板)。
在浏览器中运行时,可以指定路径回退,以允许尝试从CDN位置进行加载,但是如果CDN位置无法加载,则回退到本地位置。
bundles:在RequireJS 2.1.10中引入:允许配置要在另一个脚本中找到的多个模块ID。例子:
requirejs.config({
bundles: {
'primary': ['main', 'util', 'text', 'text!template.html'],
'secondary': ['text!secondary.html']
}
});
require(['util', 'text'], function(util, text) {
//The script for module ID 'primary' was loaded,
//and that script included the define()'d
//modules for 'util' and 'text'
});
该配置指出:模块“ main”,“ util”,“ text”和“ text!template.html”将通过加载模块ID“ primary”来找到。可以通过加载模块ID“ secondary”来找到模块“ text!secondary.html”。
这仅设置了在脚本中包含多个define()模块的模块中查找模块的位置。它不会自动将那些模块绑定到捆绑软件的模块ID。捆绑软件的模块ID仅用于查找模块集。
使用path config可能会发生类似的事情,但是它要复杂得多,并且path config路由不允许在其配置中使用加载程序插件资源ID,因为path config的值是路径段而不是ID。
如果执行构建且该构建目标不是现有的模块ID,或者如果已构建的JS文件中包含不应由加载程序插件加载的加载程序插件资源,则bundles config很有用。请注意,键和值是模块ID,而不是路径段。它们是绝对的模块ID,而不是像path config或map config这样的模块ID前缀。此外,bundle config与map config的不同之处在于map config是一对一的模块ID关系,其中bundle config用于将多个模块ID指向bundle的模块ID。
从RequireJS 2.2.0开始,优化器可以生成bundle config,并将其插入到顶层requirejs.config()调用中。有关更多详细信息,请参见bundlesConfigOutFile构建配置选项。
shim:为不使用define()声明依赖关系和设置模块值的较旧的传统“浏览器全局变量”脚本配置依赖关系,导出和自定义初始化。
这是一个例子。它需要RequireJS 2.1.0+,并假定在baseUrl目录中已安装了ribs.js,underscore.js和jquery.js。如果没有,那么您可能需要为它们设置路径配置:
requirejs.config({
//Remember: only use shim config for non-AMD scripts,
//scripts that do not already call define(). The shim
//config will not work correctly if used on AMD scripts,
//in particular, the exports and init config will not
//be triggered, and the deps config will be confusing
//for those cases.
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
//Using a function allows you to call noConflict for
//libraries that support it, and do other cleanup.
//However, plugins for those libraries may still want
//a global. "this" for the function will be the global
//object. The dependencies will be passed in as
//function arguments. If this function returns a value,
//then that value is used as the module export value
//instead of the object found via the 'exports' string.
//Note: jQuery registers as an AMD module via define(),
//so this will not work for jQuery. See notes section
//below for an approach for jQuery.
return this.Foo.noConflict();
}
}
}
});
//Then, later in a separate file, call it 'MyModel.js', a module is
//defined, specifying 'backbone' as a dependency. RequireJS will use
//the shim config to properly load 'backbone' and give a local
//reference to this module. The global Backbone will still exist on
//the page too.
define(['backbone'], function (Backbone) {
return Backbone.Model.extend({});
});
在RequireJS 2.0。*中,shim配置中的“ exports”属性可能是函数而不是字符串。在这种情况下,它的功能与上面显示的“ init”属性相同。“ init”模式在RequireJS 2.1.0+中使用,因此exports
可以将字符串值用于 forceDefine,但是一旦已知已加载库,就可以进行功能工作。
对于仅仅是jQuery或Backbone插件的“模块”,不需要导出任何模块值,shim配置可以只是一个依赖项数组:
requirejs.config({
shim: {
'jquery.colorize': ['jquery'],
'jquery.scroll': ['jquery'],
'backbone.layoutmanager': ['backbone']
}
});
但是请注意,如果要在IE中进行404负载检测,以便可以使用路径回退或errbacks,则应提供字符串输出值,以便加载程序可以检查脚本是否实际加载(init的返回不用于enforceDefine
检查):
requirejs.config({
shim: {
'jquery.colorize': {
deps: ['jquery'],
exports: 'jQuery.fn.colorize'
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
},
'backbone.layoutmanager': {
deps: ['backbone']
exports: 'Backbone.LayoutManager'
}
}
});
“ shim”配置的重要说明:
- 填充程序配置仅设置代码关系。要加载属于shim config或使用shim config的模块,需要一个正常的require / define调用。本身设置填充程序不会触发代码加载。
- 仅将其他“填充程序”模块用作填充脚本的依赖性,或者将不具有依赖性的AMD库也创建全局变量(如jQuery或lodash)后调用define()。否则,如果您使用AMD模块作为匀场配置模块的依赖项,则在构建之后,可能要等到构建中的填充代码执行后,才能评估该AMD模块,否则会发生错误。最终的解决方法是将所有填充的代码升级为具有可选的AMD define()调用。
- 从RequireJS 2.1.11开始,如果无法升级填充代码以使用AMD define()调用,则优化器具有 wrapShim构建选项,该选项将尝试自动将填充代码包装在define()中以进行构建。这改变了填充的依赖关系的范围,因此不能保证始终有效,但是,例如,对于依赖于AMD版本的Backbone的填充的依赖关系,它可能会有所帮助。
- 对于AMD模块,不会调用init函数。例如,您不能使用shim init函数来调用jQuery的noConflict。请参阅映射模块以将noConflict 用于jQuery的替代方法。
- 通过RequireJS在节点中运行AMD模块时,不支持Shim config(尽管可用于优化程序)。根据正在填充的模块,它可能会在Node中失败,因为Node与浏览器没有相同的全局环境。从RequireJS 2.1.7开始,它将在控制台中警告您不支持shim config,并且它可能会或可能不会起作用。如果您想禁止显示该消息,则可以通过
requirejs.config({ suppress: { nodeShim: true }});
。
“ shim”配置的重要优化器说明:
- 您应该使用mainConfigFile构建选项来指定可在其中找到垫片配置的文件。否则,优化程序将不了解填充程序配置。另一个选项是在构建配置文件中复制填充程序配置。
- 不要在构建中将CDN加载与shim config混合使用。示例方案:从CDN加载jQuery,但使用shim配置加载类似于jQuery的Backbone的普通版本。在进行构建时,请确保在内建文件中内联jQuery,并且不要从CDN加载它。否则,Backbone将内联到生成的文件中,并在CDN加载的jQuery加载之前执行。这是因为shim config只是延迟文件的加载,直到加载依赖项为止,但不对define进行任何自动包装。构建后,依赖关系已经内联,shim配置无法将non-define()代码的执行推迟到以后。定义()’ d模块在构建后就可以处理CDN加载的代码,因为它们将其源代码正确包装在define工厂函数中,直到加载依赖项后才执行。因此,课程:shim config是非模块化代码,传统代码的权宜之计。define()的模块更好。
- 对于本地的多文件构建,上述CDN建议也适用。对于任何匀场脚本,必须在匀场脚本执行之前加载其依赖项。这意味着要么直接在包含填充脚本的buid层中构建其依赖关系,要么通过
require([], function (){})
调用加载其依赖关系,然后require([])
对具有填充脚本的构建层进行嵌套调用。 - 如果您使用uglifyjs缩小代码,请不要将uglify选项设置
toplevel
为true,或者如果使用命令 行不通过-mt
。该选项会破坏shim用于查找出口的全局名称。
map:对于给定的模块前缀,而不是使用给定的ID加载模块,而是替换一个不同的模块ID。
这种功能对于大型项目而言非常重要,因为大型项目可能有两组模块需要使用两个不同的’foo’版本,但它们仍需要彼此合作。
使用上下文支持的多版本支持是不可能的。另外,路径配置仅用于设置模块ID的根路径,而不用于将一个模块ID映射到另一个模块。
地图示例:
requirejs.config({
map: {
'some/newmodule': {
'foo': 'foo1.2'
},
'some/oldmodule': {
'foo': 'foo1.0'
}
}
});
如果模块按如下方式布置在磁盘上:
- foo1.0.js
- foo1.2.js
- 一些/
- newmodule.js
- oldmodule.js
当’some / newmodule’执行`require(’foo’)`时,它将获取foo1.2.js文件;当’some / oldmodule’执行`require(’foo’)`时,它将获取foo1.0。 js文件。
此功能仅适用于是真正的AMD模块的脚本,这些脚本调用define()并注册为匿名模块。另外,仅对映射配置使用绝对模块ID。相对ID(如'../some/thing'
)不起作用。
还支持“ *”映射值,这意味着“对于所有加载的模块,请使用此映射配置”。如果有更具体的地图配置,则该配置优先于星型配置。例子:
requirejs.config({
map: {
'*': {
'foo': 'foo1.2'
},
'some/oldmodule': {
'foo': 'foo1.0'
}
}
});
表示对于除“ some / oldmodule”以外的任何模块,当需要“ foo”时,请改用“ foo1.2”。仅对于“ some / oldmodule”,当要求“ foo”时使用“ foo1.0”。
注意:使用map config进行构建时,需要将map config馈给优化器,并且build输出必须仍然包含requirejs config调用来设置map config。优化器在构建期间不会进行ID重命名,因为项目中的某些依赖项引用可能取决于运行时变量状态。因此,优化器不会在构建后使对映射配置的需求无效。
config:通常需要将配置信息传递给模块。该配置信息通常被称为应用程序的一部分,并且需要一种将其传递给模块的方法。在RequireJS中,这是通过requirejs.config()的config选项完成的。然后,模块可以通过请求特殊的依赖项“模块”并调用module.config()来读取该信息。例子:
requirejs.config({
config: {
'bar': {
size: 'large'
},
'baz': {
color: 'blue'
}
}
});
//bar.js, which uses simplified CJS wrapping:
//https://requirejs.org/docs/whyamd.html#sugar
define(function (require, exports, module) {
//Will be the value 'large'
var size = module.config().size;
});
//baz.js which uses a dependency array,
//it asks for the special module ID, 'module':
//https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#wiki-magic
define(['module'], function (module) {
//Will be the value 'blue'
var color = module.config().color;
});
要将config传递给package,请以该包中的主模块(而不是package ID)为目标:
requirejs.config({
//Pass an API key for use in the pixie package's
//main module.
config: {
'pixie/index': {
apiKey: 'XJKDLNS'
}
},
//Set up config for the "pixie" package, whose main
//module is the index.js file in the pixie folder.
packages: [
{
name: 'pixie',
main: 'index'
}
]
});
包:配置来自CommonJS包的加载模块。有关更多信息,请参见软件包主题。
nodeIdCompat:节点治疗模块IDexample.js
和example
相同的。默认情况下,这是RequireJS中的两个不同ID。如果最终使用的是从npm安装的模块,则可能需要设置此配置值true
以避免解析问题。此选项仅适用于以不同方式处理“ .js”后缀,它不执行任何其他节点解析和评估匹配,例如.json文件处理(JSON处理仍然需要“ json!”加载程序插件)。在2.1.10及更高版本中可用。
waitSeconds:放弃放弃加载脚本之前要等待的秒数。将其设置为0将禁用超时。默认值为7秒。
context:赋予加载上下文的名称。只要每个顶级require调用指定一个唯一的上下文字符串,这都允许require.js在页面中加载模块的多个版本。要正确使用它,请参阅“ Multiversion支持”部分。
deps:要加载的依赖项数组。当在require.js加载之前将require定义为配置对象时,并且您要指定要在require()定义后立即加载的依赖项时,此选项很有用。使用deps就像进行require([])
调用一样,但是在加载程序处理完配置后立即使用。它不会阻止 其他任何require()调用启动对模块的请求,它只是指定某些模块作为config块的一部分异步加载的一种方式。
callback:加载deps后执行的函数。在将require.js加载之前,将require定义为配置对象,并且您希望在加载配置的deps数组之后指定要使用的函数时,此选项很有用。
标:设置为true时,如果脚本加载时未调用define()或具有可检查的填充程序导出字符串值,则将引发错误。有关更多信息,请参见在IE中捕获负载故障。
xhtml:如果设置为true,则document.createElementNS()将用于创建脚本元素。
urlArgs:附加到RequireJS用于获取资源的URL的额外查询字符串参数。在未正确配置浏览器或服务器时,最有用的方法是缓存崩溃。urlArgs的高速缓存半身设置示例:
urlArgs: "bust=" + (new Date()).getTime()
从RequireJS 2.2.0开始,urlArgs可以是一个函数。如果是函数,它将接收模块ID和URL作为参数,并且应返回将添加到URL末尾的字符串。如果没有参数,则返回一个空字符串。请务必注意添加“?” 或“&”(取决于URL的现有状态)。例子:
requirejs.config({
urlArgs: function(id, url) {
var args = 'v=1';
if (url.indexOf('view.html') !== -1) {
args = 'v=2'
}
return (url.indexOf('?') === -1 ? '?' : '&') + args;
}
});
在开发过程中,使用它可能会很有用,但是请确保在部署代码之前将其删除。
scriptType:指定type =“”属性的值,该属性用于RequireJS插入文档中的脚本标签。默认值为“文本/ javascript”。要使用Firefox的JavaScript 1.8功能,请使用“ text / javascript; version = 1.8”。
skipDataMain:在RequireJS 2.1.9中引入:如果设置为true
,则跳过对数据主属性的扫描以开始加载模块。如果RequireJS嵌入在可以与页面上的其他RequireJS库进行交互的实用程序库中,并且嵌入的版本不应进行数据主加载,则很有用。