0

我想将一段代码作为 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);
});

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

4

1 回答 1

0

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

文件结构

该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";
});

一个.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";
});

测试.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
于 2013-09-02T16:26:57.833 回答