如何在同一頁面中處理兩個不同的數據主屬性？

Question

我正在為Web應用程序開發一個插件，該插件使用許多外部JS（如JStree，bootstrap和jquery）。 我還使用require來動態加載所有這些。

---

因此，最終用戶使用該插件所需要做的就是在HTML中包含此行。

<script data-main="http://host.name/pathto/main" src="http://hostname/path.to/require.js"></script>

但是，當要使用此插件的應用程序已經在內部使用RequireJS時，就會出現問題。 因此，現在HTML將具有兩個RequireJS data-main屬性，例如：

// The app's RequireJS
<script data-main="app/lib/main" src="app/lib/require.js"></script>
// This is to include plugin I have developed.
<script data-main="http://host.name/pathto/main" src="http://hostname/path.to/require.js"></script>

因此，當有兩個不同的RequireJS實例時，它總是加載第一個文件，而其他文件則從不包含。 當我們使用RequireJS開發插件時，這種情況下的解決方案是什么？

Answer 1

如您所知，您不能在同一頁面上擁有兩個data-main站點。 加載RequireJS的第一個<script>標記將加載並執行它，而RequireJS將負責在相應的data-main中加載代碼。 第二個<script>標記將再次加載並執行RequireJS，但是RequireJS將檢測到它已被加載，並在那里立即停止執行。

您應該通過require或define調用或通過deps配置選項加載插件。

如果您的代碼需要添加配置，則可以再次調用require.config() 。 RequireJS將傳遞給require.config()的多個配置組合在一起。 根據您的用例場景，您可能需要使用context選項來使代碼使用的配置與主應用程序完全分開。 如果最終不得不使用單獨的上下文，則它將類似於以下內容：

<!-- Load the app. -->
<script data-main="app/lib/main" src="app/lib/require.js"></script>
<!-- Load the plugin. -->
<script>
    var my_require = require.config({
        context: "plugin_context",
        baseUrl:...
    });
    my_require(["main"]);
</script>