如何在require.config中使用相对路径？

Question

我想分发一段代码作为AMD模块。 该模块在noConflict模式下依赖jQuery，并带有两个jQuery插件。

我希望用户能够只需要一个模块文件即可使用该模块（模块将托管在我们的服务器上），并为它们处理依赖项。 但是，为了正确加载依赖项，我必须调用require.config() ，它似乎具有相对于网页的模块路径，而不是相对于调用脚本的路径。 我可以使用paths配置使所有路径都是绝对的。 这将解决依赖性问题，但也会使生产服务器外部的任何测试成为噩梦。

更具体地说，模块文件大致如下所示：

define (['./jquery-wrapper'], function ($) {
    ...
    return module;
});

同一目录中的jquery-wrapper.js文件如下所示：

require.config ({
    paths: {
        'jquery-original': '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
        // ^ naturally, this one has to be absolute
    },  
    shim: {
        'jquery-original': {
            exports: '$',
        },
        '../plugin/js/jquery.nouislider.min': {
            // ^ this path is relative to the web page, not to the module
            deps: ['jquery-original'],
        },
        '../plugin/js/jquery.ie.cors': {
            // ^ this path is relative to the web page, not to the module
            deps: ['jquery-original'],
        },
    },  
});         

define (['jquery-original', './jquery.nouislider.min', './jquery.ie.cors'], function ($, slider, cors) {
    // ^ these paths are relative to the module
    console.log ('types: ' + typeof slider + typeof $.noUiSlider + typeof cors);
    return $.noConflict (true);
});     

有什么方法可以在任何地方使用相对于模块的路径吗？

Answer 1

我认为您可以使用单独的配置来使其正常工作：

文件结构

在此示例中， other/module路径模拟了其他服务器。

¦   a.js
¦   b.js
¦   c.js
¦   test.html
¦
+---other
    +---module
            main.js
            module-file-1.js

其他/模块/ main.js

具有相关性，使用相对的模块名称。

define(["./module-file-1"], function (mf1) {
    console.log("load main", "deps", mf1);
    return "main";
});

a.js

具有相关性，使用相对的模块名称。

define(["./b"], function(b) {
    console.log("load a", "deps", b);
    return "a";
});

b.js和c.js

没意思

define(function () {
    console.log("load b");
    return "b";
});

其他/模块/模块文件-1.js

没意思

define(function () {
    console.log("load module-file-1");
    return "module-file-1";
});

test.html

设置两个require上下文，使用每个上下文来加载自己的模块，然后等待两组模块加载：

<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

var localRequire = require({
    context: "local"
});

var moduleRequire = require({
    context: "module",
    baseUrl: "http://localhost/other/module/"
});

function deferredRequire(require, deps) {
    return $.Deferred(function(dfd) {
        require(deps, function() {
            dfd.resolve.apply(dfd, arguments);
        });
    }).promise();
}

$.when(deferredRequire(moduleRequire, ["main"]), deferredRequire(localRequire, ["a", "b", "c"])).then(function(deps1, deps2) {
    // deps1 isn't an array as there's only one dependency
    var main = deps1;
    var a = deps2[0];
    var b = deps2[1];
    var c = deps2[2];
    console.log("Finished", main, a, b, c);
});

</script>

安慰

load b
load a deps b
load c
load module-file-1
load main deps module-file-1
Finished main a b c