javascript - 要求 JS baseUrl 冲突

Question

我从同一个域加载了两个 Javascript 文件。每个 JS 执行不同的功能，为此，我使用了 requirejs 模块加载器。
我的问题是，我在 js 和 baseUrl 下都使用了 require.config 调用，这两种配置都不同。
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(服务器+ “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) {
    // ...
});

如果您在模块主体中使用 var myModule = require("..."); 语法，则 "require" 模块作为依赖项是必需的。

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

(在 this 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() 函数开始是不寻常的。通常，配置和模块位于不同的文件中。所以你可能有:

• 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 优化器，它可能会更好地发挥作用。

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

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

例如:

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” 模块。