用RequireJS加载几个配置文件

Load several configuration files with RequireJS

本文关键字：几个 配置文件 RequireJS 加载      更新时间：2023-09-26

我是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的人，我建议阅读这篇文章。在找到这篇文章之前，我花了很多时间试图理解文档和许多教程。我认为，它是JavaScript模块化新手最好的信息来源。

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

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

如果你的模块app.js需要enjs和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
    });
});
相关文章：