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

如果你的模块app.js需要en.js和settings.js来运行这里是你的main.js的可能结构

<强> main.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
    });

});

Answer 2

在启动应用程序之前加载两个配置的最直接方法是不使用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，因为这些已经加载。

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

使用RequireJS加载多个配置文件

2 个答案: