控制台

Question

我想将一段代码作为AMD模块分发。该模块依赖于带有两个jQuery插件的noConflict模式的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

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

1 个答案: