RequireJS 优化不加载库

Question

我正在使用 ngStart Angular 种子项目，并且正在尝试优化 RequireJS 以进行部署。当我运行 grunt 作业来构建工件时，我最终得到一个输出文件，其中不包含我的 main.js 文件中的所有库。我今天大部分时间都在尝试不同的事情来让它发挥作用。如果我明确列出我的 gruntfile 中的每个模块（我真的不想这样做），它们都会进入那里，但似乎顺序不正确，因为它在浏览器中不起作用。我认为优化器应该读取我的 main.js 中的 require.config 调用并以正确的顺序加载所有内容。以下是我认为应该可以工作的内容，但并未加载我的所有模块。

咕噜任务：

requirejs: {
    compile: {
        options: {
            baseUrl: "<%= pkg.folders.jsSource %>",
            name: "main",
            include: [
                'almond'
            ],
            mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
            out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/modules/main.js",
            optimize: "none",
            paths: {
                'almond': '../../../bower_components/almond/almond',
                'config/configuration': 'config/<%=configuration%>'
            },
            generateSourceMaps: true,
            preserveLicenseComments: false,
            useSourceUrl: true,
            uglify2: {
                // TODO - angular.js is already minified, mangling destroys it, so mangling is currently globally disabled
                mangle: false
             }
         }
     }
 }

main.js：

/*global require */
(function (require) {
    "use strict";
    require.config({
        paths: {
            'jquery': '../../../bower_components/jquery/jquery',
            'jquery-ui': '../../../bower_components/jquery-ui/ui/jquery-ui',
            'jquery.ui.widget': '../../../bower_components/jquery-ui/ui/jquery.ui.widget',
            'bootstrap': '../../../bower_components/bootstrap/dist/js/bootstrap',
            'angular': '../../../bower_components/angular/angular',
            'ngResource': '../../../bower_components/angular-resource/angular-resource',
            'angular-route': '../../../bower_components/angular-route/angular-route',
            'angular-sanitize': '../../../bower_components/angular-sanitize/angular-sanitize',
            'ngUi': '../../../bower_components/angular-ui/build/angular-ui',
            'ui.bootstrap': '../external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
            'ngCalendar': '../../../bower_components/angular-ui-calendar/src/calendar',
            'uikeypress': '../../../bower_components/angular-ui-utils/modules/keypress/keypress',
            'dtPicker': '../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
            'fileUpload': '../../../bower_components/blueimp-file-upload/js/jquery.fileupload',
            'fullcalendar': '../../../bower_components/fullcalendar/fullcalendar',
            'iframeTransport': '../external-libs/iframetransport/jquery.iframe-transport',
            'moment': '../../../bower_components/momentjs/moment'
        },
        shim: {
            'jquery': { deps: [], exports: 'jquery' },
            'jquery-ui': { deps: ['jquery'], exports: 'jquery-ui' },
            'jquery.ui.widget': { deps: ['jquery'], exports: 'jquery-ui-widget' },
            'bootstrap': { deps: ['jquery'], exports: 'bootstrap' },
            'angular': { deps: ['jquery'], exports: 'angular' },
            'ngResource': { deps: ['angular'], exports: 'ngResource' },
            'angular-route': { deps: ['angular'], exports: 'ngRoute' },
            'angular-sanitize': { deps: ['angular'], exports: 'ngSanitize' },
            'ngUi': { deps: ['angular'], exports: 'ngUi' },
            'ui.bootstrap': { deps: ['angular', 'bootstrap', 'ngUi'], exports: 'ui-bootstrap' },
            'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'], exports: 'ngCalendar' },
            'uikeypress': { deps: ['angular', 'ngUi'], exports: 'uikeypress' },
            'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'], exports: 'dtPicker' },
            'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'], exports: 'fileUpload' },
            'fullcalendar': { deps: ['jquery', 'jquery-ui'], exports: 'fullcalendar' },
            'iframeTransport': { deps: ['jquery', 'jquery-ui'], exports: 'iframeTransport' },
            'moment': { deps: ['jquery'], exports: 'moment' }
        },
        priority: ['angular']
    });

    require(['config/config',
             'angular',
             'angular-route'],
        function (config, angular, routes) {
            require(config.standardRequireModules, function (angular) {
                angular.bootstrap(document, ["app"]);
            });
        });
}(require));

当我运行任务时，我得到了这个：

Running "requirejs:compile" (requirejs) task

Tracing dependencies for: main

/Users/user/dev/project/trunk-angular/target/project-0.1.0/modules/main.js
----------------
/Users/user/dev/project/trunk-angular/bower_components/almond/almond.js
/Users/user/dev/project/trunk-angular/bower_components/jquery/jquery.js
/Users/user/dev/project/trunk-angular/bower_components/angular/angular.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/configuration.js
/Users/user/dev/project/trunk-angular/bower_components/bootstrap/dist/js/bootstrap.js
/Users/user/dev/project/trunk-angular/bower_components/angular-ui/build/angular-ui.js
/Users/user/dev/project/trunk-angular/src/main/external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/config.js
/Users/user/dev/project/trunk-angular/bower_components/angular-route/angular-route.js
/Users/user/dev/project/trunk-angular/src/main/modules/main.js

项目的根是/Users/user/dev/project/trunk-angular。

所有路径变量都应该没问题（它们在其他任务中并且输出的路径是正确的）。我只是不知道发生了什么，非常感谢一些帮助。

Answer 1

首先，我明白了，您正在使用嵌套的 require 调用，但您的构建配置不包括 findNestedDependencies: true.

其次，requirejs 优化器仅包含路径中明确需要或定义作为其他模块的依赖项的那些模块，这些模块稍后需要。