胖蔡叨叨叨
你听我说

RequireJS 配置选项

在顶层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 configmap 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.jsexample相同的。默认情况下,这是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库进行交互的实用程序库中,并且嵌入的版本不应进行数据主加载,则很有用。

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » RequireJS 配置选项
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏