需要JS baseUrl冲突

Question

我从同一个域加载了两个Javascript文件.每个JS执行不同的功能,为此,我使用了requirejs模块加载器.
我的问题是,我require.config在两个js下使用了调用,而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更改为1st 1st,即来自JS1(server +"js /")!! 这是完全错误的.有人可以指出我在这里,如果我做错了.

Answer 1

Nikos Paraskevopoulos对于这种方式(多元化)有正确的想法,但我认为有两种方法.

1.使用多版本

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

// 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("...");模块体内的语法,则需要该模块作为依赖项.

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

(在这个jsfiddle有一个简单的例子)

但回到您的示例,您可以为每个文件分配本地require函数,并通过本地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.使用合并的require配置

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

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

如果你不能修改一些代码,那么这可能很棘手.

例如:

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"模块.