如何加載在單個文件中定義的多個命名AMD模塊？

Question

我的理解是它不應該發生，但確實如此 。 這些庫最合適的解決方法是什么？

筆記：

• 我認為在require.js手動（使用腳本標記）之后運行這些腳本應該可以工作，而且看起來確實如此。 但是，RequireJS文檔明確警告 data-main腳本是異步運行的。 雖然require.js應該正確定義了define多個命名模塊的腳本所需的define函數，但我還假設如果沒有從data-main腳本加載適當的配置，壞事可能會以非確定的方式發生。 這個對嗎？
• 我也沒有看到shim ， map ， bundles和paths配置屬性的任何組合如何在這種情況下有所幫助，盡管我希望我錯過它。

澄清第一個注釋:(我的不好，現在還不清楚）

我在這里描述的只是手動執行（使用HTML腳本標記） 在 RequireJS和data-main腳本之后定義多個模塊的腳本。 知道后者運行異步，我的擔憂應該變得更加明顯（但請隨時讓我詳細說明）。 其中很大一部分雖然我似乎可以成功地要求每個命名模塊，但我不確定該行為是否具有確定性（同樣，它不是很漂亮，我寧願避免使用其他腳本標記並正確地異步加載所有內容） 。

<script src="scripts/require.js" data-main="app/main.js"></script>
<script src="scripts/datajs-1.1.2.js"></script>

這里，datajs-1.1.2.js定義了兩個模塊，如上面的鏈接所述，並在下面復制：

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

Answer 1

什么將會和將不會工作取決於如何在應用程序中使用定義多個命名模塊的文件的細節。

通常，如果無法確定單個文件中定義的模塊（使用命名定義）的順序，則設置paths以將模塊名稱映射到定義它們的文件應該可以防止出現問題：

paths: {
    'foo': 'path/to/foobar',
    'bar': 'path/to/foobar'
}

如果需要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>

是不正確的。 加載通過<script>標記調用define的模塊通常是錯誤的。 （我會說它總是錯的，但可能有一些非常奇怪的情況，讓不兼容的資產一起工作，你必須做一些通常會出錯的事情。但這是不尋常的，必須有理由。）當你通過這樣做，你打開時間問題。 有時它可能有效，有時可能無效。

但是，這應該可以防止任何時間問題：

<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>

每當需要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>

我建議閱讀有關此選項的文檔 ，以避免可能的誤解。