Question

我从同一个域加载了两个Javascript文件。每个JS执行不同的功能，为此，我使用了requirejs模块加载器我的问题是，我在两个js下都使用了require.config调用，而 baseUrl 对于这两种配置都有所不同。
JS1

require.config({
                baseUrl : server + "js/", // server is 192.168.1.10:3000/
                paths : 
                {
                    jquery : "jquery",
                    moment : "moment.min"
                },
                waitSeconds: 20
            });
            require(["jquery","moment"], function(jQuery,moment)
            {
                jQuery.noConflict();
                window.moment = moment;                 
                jQuery(function($)
                {
                    window.$191 = $;
                    callback($191); 
                });
            });

JS2

require.config({
                baseUrl: "http://192.168.1.9:6060/App/resources",
                paths:
                {
                    moment: "js/moment.min",
                    ejs :  "js/ejs"
                }
            });
require(["moment","ejs"],function()
{
        callback("OK");
});

我首先加载 JS1 ，然后加载 JS2 ，但是当我加载JS2时，它的baseUrl更改为第一个，即来自 JS1 （服务器） +＆＃34; js /＆＃34;）!!这是完全错误的。如果我做错了，可以有人指出我在这里。

Answer 1

Nikos Paraskevopoulos对于这种方式（多元化）有正确的想法，但我认为有两种方法。

1。使用multiversion

将两个配置传递给require.config()将返回两个独特的需求函数。

// It is important to give the config objects a "context" name.
// This is what keeps them unique.
var r1 = require.config({
    context: "r1",
    baseUrl: "//rawgithub.com/requirejs/text/2.0.10/"
});
var r2 = require.config({
    context: "r2",
    baseUrl: "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/"
});

此外，即使您在上面的示例中的每个配置中使用相同的baseUrl，每个text模块也将是一个唯一的实例，因为多版本支持的性质。

这些可用于从不同的URL加载模块。在下面的示例中，text1和text2是不同的模块实例，即使它们本质上是相同的文件。

r1(["require", "text"], function(r, text1) {
    // ...
});
r2(["require", "text"], function(r, text2) {
    // ...
});

如果您在模块正文中使用"require"语法，则需要var myModule = require("...");模块作为依赖项。

如果所有依赖项都在依赖项数组中声明，那么您不需要这样。

（在this jsfiddle ）

有一个简单的例子

但回到您的示例，您可以为每个文件分配本地需求函数，并通过本地require函数加载模块。

JS1

(function () {
    var r = require.config({
        context: "JS1",
        baseUrl: server + "js/", // server is 192.168.1.10:3000/
        paths: {
            jquery: "jquery",
            moment: "moment.min"
        },
        waitSeconds: 20
    });
    r(["jquery", "moment"], function (jQuery, moment) {
        jQuery.noConflict();
        window.moment = moment;
        jQuery(function ($) {
            window.$191 = $;
            callback($191);
        });
    });
}());

JS2

(function () {
    var r = require.config({
        context: "JS2",
        baseUrl: "http://192.168.1.9:6060/App/resources/",
        paths: {
            moment: "js/moment.min",
            ejs: "js/ejs"
        }
    });
    r(["moment", "ejs"], function () {
        callback("OK");
    });
}());

除了

然而，模块不能以调用define()函数开始是不常见的。通常，config和模块位于单独的文件中。所以你可能有：

JS1-config.js和JS1.js
JS2-config.js和JS2.js

JS1.js和JS2.js将采用以下形式：

define(["array", "of", "dependencies"], function(array_, of_, dependencies_) {
});

2。使用合并的需求配置

使用单个模块加载器配置文件可能更好地提供一个有凝聚力的应用程序。您可以看到所有必需的模块，如果您想使用它，它可能会更好地使用r.js优化器。

因此，我建议将您的配置合并到您的应用程序的单个配置中。这样您就不会将模块加载器配置与实际使用模块的代码混合在一起。

如果您无法修改某些代码，那么这可能会很棘手。

E.g：

var baseUrl1 = server + "js/";
var baseUrl2 = "http://192.168.1.9:6060/App/resources/";
require.config({
    paths: {
        jquery: baseUrl1 + "jquery",
        moment: baseUrl1 + "moment.min",
        //moment: baseUrl2 + "js/moment.min",
        ejs: baseUrl2 + "js/ejs"
    },
    waitSeconds: 20
});

这假设两个JS文件都可以使用相同的"moment"模块。

需要JS baseUrl冲突

1 个答案:

1。使用multiversion

JS1

JS2

除了

2。使用合并的需求配置