如何加载在单个文件中定义的多个命名AMD模块?

tne*_*tne 6 amd requirejs datajs

我的理解是它不应该发生,但确实如此.这些库最合适的解决方法是什么?

笔记:

  • 我认为在require.js手动(使用脚本标记)之后运行这些脚本应该可以工作,事实上它确实如此.但是,RequireJS文档明确警告data-main脚本是异步运行的.虽然require.js应该已经正确定义了define定义多个命名模块的脚本所需的功能,但我还假设如果没有从data-main脚本加载适当的配置,可能会以不确定的方式发生不良事件.它是否正确?
  • 我也看不出的任意组合shim,map,bundlespaths配置属性可以在这种情况下帮助,但我希望我失去了它.

澄清第一个注释:(我的不好,现在还不清楚)

我在这里描述的只是手动执行(使用HTML脚本标记) RequireJS和data-main脚本之后定义多个模块的脚本.知道后者运行异步,我的担忧应该变得更加明显(但请随时让我详细说明).其中很大一部分虽然我似乎可以成功地要求每个命名模块,但我不确定该行为是否具有确定性(同样,它不是很漂亮,我更愿意避免使用其他脚本标记并正确地异步加载所有内容) .

<script src="scripts/require.js" data-main="app/main.js"></script>
<script src="scripts/datajs-1.1.2.js"></script>
Run Code Online (Sandbox Code Playgroud)

这里,datajs-1.1.2.js定义了两个模块,如上面的链接所述,并在下面复制:

// AMD support
if (typeof define === 'function' && define.amd) {
    define('datajs', datajs);
    define('OData', odata);
} ...
Run Code Online (Sandbox Code Playgroud)

Lou*_*uis 10

什么将会和将不会工作取决于如何在应用程序中使用定义多个命名模块的文件的细节.

通常,如果无法确定单个文件中定义的模块(使用命名定义)的顺序,则设置paths将模块名称映射到定义它们的文件应该可以防止出现问题:

paths: {
    'foo': 'path/to/foobar',
    'bar': 'path/to/foobar'
}
Run Code Online (Sandbox Code Playgroud)

如果foo或者bar是必需的,RequireJS将加载定义文件两者(path/to/foobar.js),这是没有问题的.

根据您在问题中添加的详细信息,我可以这样说.首先,这段代码:

<script src="scripts/require.js" data-main="app/main.js"></script>
<script src="scripts/datajs-1.1.2.js"></script>
Run Code Online (Sandbox Code Playgroud)

是不正确的.加载define通过<script>标记调用的模块通常是错误的.(我会说它总是错的,但可能有一些非常奇怪的情况,让不兼容的资产一起工作,你必须做一些通常会出错的事情.但这是不寻常的,必须有理由.)当你通过这样做,你打开时间问题.有时它可能有效,有时可能无效.

但是,这应该可以防止任何时间问题:

<script>
require = {
    paths: {
        datajs: 'scripts/datajs-1.1.2',
        OData: 'scripts/datajs-1.1.2'
    }
};
</script>
<script src="scripts/require.js" data-main="app/main.js"></script>
Run Code Online (Sandbox Code Playgroud)

每当需要两个模块中的datajs-1.1.2.js任何一个时,无论是因为它调用require还是因为它define使用适当的模块名称调用,都将加载定义两个模块的文件.

(警告:我在上面的示例中显示的配置是一个有根据的猜测,它包含足够的细节来说明.一旦与已经存在的配置结合使用它可能无法工作app/main.js,我并不是说它是最好的配置方式RequireJS用于您的特定应用.)

对于RequireJS 2.1.10及更高版本,还有一个bundles选项,它更好用:

<script>
require = {
    bundles: {
      "js/datajs-1.1.2": ["datajs", "OData"]
    }
};
</script>
<script src="scripts/require.js" data-main="app/main.js"></script>
Run Code Online (Sandbox Code Playgroud)

我建议阅读有关此选项的文档,以避免可能的误解.