使用 RequireJS 加载几个配置文件

Question

我是 RequireJs 库的新手，所以我有一个问题。在我的应用程序中，我有一个本地化文件（称为en.js、es.js 等）和一个设置文件（settings.js）。第一个用于本地化我的应用程序（更改消息、标题等），第二个用于在应用程序上设置一些配置。所以，我想要的是在加载主应用程序文件之前加载本地化文件（比如en.js）和settings.js 文件。这里是文件树结构：

\static
    \js
        \locale
           en.js
        \config
           settings.js
        \app
           app.js

在教程中，我只看到data-main 指定的一个入口点，例如：

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

但在我的情况下，似乎应该首先加载两个主要文件（en.js 和 settings.js）。那么，实现这一点的正确方法是什么？

编辑

对于那些不熟悉模块化 JavaScript 的人，我建议阅读 this 文章。在找到这篇文章之前，我花了很多时间试图理解文档和几十个教程。而且我认为，它是模块化 JavaScript 新手的最佳信息来源。

Answer 1

在启动应用程序之前加载两个配置的最直接方法是不使用 RequireJS 加载此配置，而是使用 script 元素加载它。你可以：

<script src="scripts/require.js"></script>
<script src="path/to/settings.js"></script>
<script src="path/to/en.js"></script>
<script>
    require(["name of your main module"]);
</script>

en.js 和 settings.js 的路径是普通的旧 JavaScript 路径。 "name of your main module" 取决于您的 RequireJS 配置中的内容，您没有在问题中显示。我宁愿不假设。鉴于settings.js 是您的应用程序的通用 配置。我把它放在首位，以便en.js 可以从中受益，并且只包含最少量的代码。所以你的settings.js 将包含一般配置选项，这通常意味着至少设置baseUrl，很可能还有paths：

requirejs.config({
    baseUrl: "static/js",
    paths: {
        // whatever makes sense for your application
    }
});

您的en.js 文件也可以根据需要调用requirejs.config。您需要什么取决于您使用的国际化解决方案。您的 app.js 将类似于：

define([ ... deps ... ], function (... arguments ... ) {
    // start the application
});

deps 所需的内容取决于您的应用程序实际使用的内容。你不需要那里的en.js 或settings.js，因为它们已经被加载了。

这样你就不需要嵌套任何东西。

Answer 2

如果您的模块 app.js 需要 en.js 和 settings.js 才能工作，这里是您的 main.js 的可能结构

ma​​in.js：

requirejs.config({
    baseUrl: "/static/js",
    paths: {
        en: "locale/en",
        settings: "config/settings",
        app: "app/app"
    }
});


requirejs(["en", "settings"], function(enRes, settingsRes) {

    //here you're sure that both modules are loaded

    // you can load app module
    requirejs(["app"], function(appRes) {
      //start your app
    });

});