Requirejs为什么以及何时使用垫片配置(Requirejs why and when to u

2019-07-21 20:33发布

我从这里阅读requirejs文件API

requirejs.config({
    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.
                return this.Foo.noConflict();
            }
        }
    }
});

但我没有得到它的底座部分。 为什么我应该使用垫片和我应该怎么配置,我可以得到一些更多的澄清

请任何一个可以与例子,为什么当我们要使用垫片解释。 谢谢。

Answer 1:

垫片的主要用途是与不支持AMD库,但你需要管理它们的依赖。 例如,在骨干网和下划线上面的例子:你知道骨干需要下划线,所以假设你写你这样的代码:

require(['underscore', 'backbone']
, function( Underscore, Backbone ) {

    // do something with Backbone

}

RequireJS将揭开序幕两个下划线和骨干异步请求,但你不知道哪一个会回来的第一所以它可能是骨干会尝试它的加载之前,做一些与下划线。

注:此下划线/骨干例子是既支持AMD的库之前写的。 但原则适用于任何今天的库不支持AMD真。

该“初始化”钩子让你做其他先进的东西,例如,如果一个库通常会导出两个不同的东西到全局命名空间,但要重新定义他们的单一命名空间下。 或者,也许你想要做对,你加载库中的方法的一些猴子补丁。

更多的背景:

  • 升级到2.0 RequireJS给出的顺序插件如何试图在过去解决这个历史的一些。
  • 见的“加载非模块”部分这篇文章由亚伦哈迪另一个很好的说明。


Answer 2:

按照RequireJS API文档,垫片可让您

配置的依赖,出口和自定义初始化不使用定义()申报的依赖,并设置模块值年纪大了,传统的“浏览器全局”的脚本。

-配置的依赖

比方说,你有2个JavaScript的模块(moduleA和moduleB),其中一人(moduleA)依赖于其他(moduleB)。 所以你指定的依赖关系需要()或定义这两者都是必要为自己的模块()

require(['moduleA','moduleB'],function(A,B ) {
    ...
}

但由于需要自身跟随AMD,你不知道哪一个会尽早取出。 这是垫片来抢救。

require.config({
    shim:{
       moduleA:{
         deps:['moduleB']
        } 
    }

})

这将确保moduleB总是取moduleA加载之前。

-配置出口

沉出口讲述RequireJS全局对象(窗口,假设,当然,你在浏览器中是)什么成员是实际模块值。 比方说moduleA将自身添加到window为“MODA”(就像jQuery和强调确实为$和_分别),那么,我们使我们的出口值“MODA”。

require.config({
    shim:{
       moduleA:{
         exports:'modA'
        } 
    }

它会给RequireJS的本地引用这个模块。 全球MODA仍然会在页面上存在过。

-自定义初始化旧的“浏览器的全球”脚本

这可能是垫片配置的最重要的功能,它允许我们添加“浏览器的全球”,'非AMD的剧本(不遵循模块化的模式要么)在我们自己的模块依赖。

比方说moduleB是老式的JavaScript只有两个功能FuncA的()和funcB()。

function funcA(){
    console.log("this is function A")
}
function funcB(){
    console.log("this is function B")
}

虽然这两个功能在窗口范围内都有效,RequireJS建议我们使用他们通过自己的全球标识符/手柄,以免混淆。 所以配置作为垫片

shim: {
    moduleB: {
        deps: ["jquery"],
        exports: "funcB",
        init: function () {
            return {
                funcA: funcA,
                funcB: funcB
            };
        }
    }
}

由init函数的返回值被用作模块的出口值,而不是通过“出口”字符串中找到的对象。 这将使我们能够在我们自己的模块使用funcB

require(["moduleA","moduleB"], function(A, B){
    B.funcB()
})

希望这有助于。



Answer 3:

你必须在requirejs.config添加路径声明,例如:

requirejs.config({
    paths: {
          'underscore' : '.../example/XX.js' /// your file java script
          'jquery' : '.../example/jquery.js' /// your file java script
    }
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});


文章来源: Requirejs why and when to use shim config