Question

我正在创作一个“单页应用”。我把单页放在引号中，因为我将为下面列出的每个用例重新加载往返页面：

用户身份验证之前
用户身份验证后
仅适用于管理员

我希望减少启动应用程序所需的字节数，还要为没有授权使用它的用户隐藏逻辑/代码。这就是为什么我想根据这些用例将应用程序分成三个不同的块。

我还想制作一般的第三方供应商库/框架。这些将用于整个用例，并且启用了浏览器缓存后，当用户重新加载到新的用例/模式时，我将节省更多的字节和加载时间。

我正在使用AngularJS进行应用程序逻辑和路由，我想使用RequireJS进行依赖注入/映射。这也将帮助我定义哪些代码文件将用于哪些用例批量，因为它们可能会在不同的用例中重用应用程序代码。

现在，我已经阅读了我的RequireJS，但据我所知，我无法配置RequireJS以干燥的方式处理这样的三个不同的应用程序流。我可以在每个用例中使用一个'main.js'，它使用相同的路径和填充配置进行所有引导角度，但这不会是DRY。

示例：

require.config({
    baseUrl: 'js/app',
    paths: {
        // Setting up paths to required libraries
        'jquery':           '../vendor/jquery/jquery',
        'angular':          '../vendor/angular/angular',
        'ngRoute':          '../vendor/angular-route/angular-route',
        'ngSanitize':       '../vendor/angular-sanitize/angular-sanitize',
        'ngCookies':        '../vendor/angular-cookies/angular-cookies',
        'ngResource':       '../vendor/angular-resource/angular-resource'
    },
    shim: {
        'angular':          {exports: 'angular'},
        'ngRoute':          {deps: ['angular']},
        'ngSanitize':       {deps: ['angular']},
        'ngCookies':        {deps: ['angular']},
        'ngResource':       {deps: ['angular']}
    }
});
require(['beforeLoginApp', 'jquery'], function (app, $) {

    // Since the HTML tag is hidden amongst a lot of
    // browser version checks, we set the main app controller
    // here.
    var $html = $('html');
    $html.attr('ng-controller', 'AppController');

    // Startup the Angular framework with our application
    angular.bootstrap(document, [app.name]);

    return true;
});

然后必须为所有用例复制此文件，并在需要'beforeLoginApp'，'afterLoginApp'和'adminApp'之间切换。而且我无法将供应商库与应用程序代码分开，从而阻止浏览器在三种不同的页面加载之间缓存供应商库。

必须有更好的方法......

Answer 1

可以多次调用require.config，因此您可以为所有案例和配置提供通用配置，这些配置和配置仅设置特定案例所需的内容。

multipage example提供了一个可以适应这项任务的组织。例如，js/page1.js可以是：

// Loads the common config.
require(['./common'], function (common) {
    require.config({
        // Additional config specific to page 1.
    });
    require(['app/main1']);
});

这为避免重复提供了一些支持。

RequireJS在不同的'筒仓'中单独申请

1 个答案: