Require.JS垫片配置全局范围? [英] Require.JS shim config global scope?

问题描述

我对requireJS进行了以下设置.

I have following setup for requireJS.

requirejs.config({
     paths: {
            'resources' : '/Scripts/resources'
     },
     shim: {
             'resources': {
                           exports: 'LocalizedStrings'
           }
     }
});

我的resources.JS如下所示:

And my resources.JS look like following:

LocalizedStrings = {
                    title: "Demo",
                    save: "Save"
}

现在，当我将资源作为依赖项加载到main.JS文件中时，我可以访问LocalizedStrings并且它起作用.

Now when I load resources as a dependency in main.JS file I can access LocalizedStrings and it works.

//main.js
define(function(require){
    var LocalizedStrings = require('resources');
    console.log(LocalizedStrings); //works as expected
});

但是，在其他模块上，我实际上并不需要作为访问"LocalizedStrings"的依赖项来加载资源.

However on other modules I don't really need to load the resources as dependency to access 'LocalizedStrings'.

//othermodule.js
define(function(require){
    console.log(LocalizedStrings); //works as expected even though resources dependency is not loaded
});

我在这里不明白的是，如果我使用shim加载JS文件并加载一次，它是否可以全局使用，而不必在其他模块中再次加载相同的依赖项.

What I don't understand here is if I load a JS file using shim and load it once, does it become globally available and I don't have to load the same dependency again in other modules.

推荐答案

Backbone和Underscore都修改了全局范围，因此，如果浏览器运行了它们的代码，则全局变量将存在.

Backbone and Underscore both modify the global scope, so if the browser has run their code, then the globals will exist.

如果将其作为垫片加载到RequireJS中，或者好像您在其src中直接包含了脚本标签，就会发生这种情况.

This will happen if loading as a shim in RequireJS, or as if you included a script tag with their src directly.

一旦全局变量存在，它们就会存在(除非我明确地明确delete).

Once the globals exist, they exist (unless explicitly deleted I guess).

此jsfiddle是使用垫片的简单示例，并且可以看到值(对于某些库)设置为全局变量.

This jsfiddle is a simple example of using shims, and seeing that the values (for certain libraries) are set as globals.

该示例的目的是显示仅在require()调用内保证全局变量的值.(如果使用AMD加载程序，而不是简单地将库导入到script标记).而且全局值会在未来某个不确定的时间出现.

The aim of the example is to show that the value of the globals is only guaranteed inside a require() call. (if using an AMD loader, and not simply importing the libraries in a script tag). And that the values of the globals will exist at some indeterminate time in the future.

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    },
    paths: {
        jquery: "http://code.jquery.com/jquery-1.9.1",
        backbone: "http://backbonejs.org/backbone",
        underscore: "http://underscorejs.org/underscore"
    }
});

function appendVersions(msg, $, _, Backbone) {
    var pre = document.getElementById("content");
    var s = "<h2>" + msg + "</h2>";
    s += "jquery=";
    try { s += $.fn.jquery; } catch (e) { s += e.msg; }
    s += "<br>";
    s += "_=";
    try { s += _.VERSION; } catch (e) {  s += e.msg; }
    s += "<br>";
    s += "Backbone=";
    try { s += Backbone.VERSION; } catch (e) {  s += e.msg; }
    pre.innerHTML += s;
}

appendVersions("Before require (will be undefined)", window["$"], window["_"], window["Backbone"]);

require(["jquery", "underscore", "backbone"], function ($, _, Backbone) {
    appendVersions("Inside Require (should *always* be ok, unless the scripts aren't there)", $, _, Backbone);
});

appendVersions("After require (Probably be undefined, as the require probably won't have loaded the scripts yet)", window["$"], window["_"], window["Backbone"]);

setTimeout(function () {
    appendVersions("After Timeout (should be ok, but depends on how quickly the scripts load. Try changing the timeout duration)", window["$"], window["_"], window["Backbone"]);
}, 2000);

样本输出

这篇关于Require.JS垫片配置全局范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！