构建RequireJS（AMD）模块并加载它

Question

我在两个不同的存储库中有两个Javascript项目（A和B）。每个都使用RequireJS和grunt-contrib-requirejs插件来运行优化器。我想要构建项目B，在项目A中将其添加为Bower依赖项，然后在单击按钮时异步加载B.

项目A的requirejs grunt配置如下所示：

requirejs: {
    compile: {
        options: {
            optimize : "uglify2",
            preserveLicenseComments: false,
            baseUrl : "<%= PATHS.BUILD %>/js",
            uglify2 : {
                output : {
                    "max_line_len" : 0
                }
            },

            paths: {
                "backbone"              : "empty:",
                "bootstrap"             : "empty:",
                "hbs"                   : "../../../bower_components/require-handlebars-plugin/hbs",
                "i18n"                  : "empty:",
                "jquery"                : "empty:",
                "marionette"            : "empty:",
                "moment"                : "empty:",
                "underscore"            : "empty:",

                "templates" : "../templates",
                "locales" : "../locales"
            },

            hbs : {
                "templateExtension" : "template"
            },

            shim: {
                "bootstrap" : ["jquery"]
            },
            deps: ["config"],
            name: "main",
            out: "<%= PATHS.BUILD %>js/<%= pkg.name %>.min.js"
        }
    }
}

项目B更复杂，依赖性更强......

requirejs: {
    compile: {
        options: {
            baseUrl : "js",

            wrap : {
                "startFile": "wrap.start",
                "endFile" : "wrap.end"
            },

            paths: {
                "almond"                : "../bower_components/almond/almond",
                "async"                 : "empty:",
                "backbone"              : "empty:",
                "backbone-pageable"     : "empty:",
                "backbone-relational"   : "empty:",
                "bootstrap"             : "empty:",
                "d3"                    : "empty:",
                "handlebars"            : "empty:",
                "hbars"                 : "empty:",
                "highcharts"            : "empty:",
                "i18n"                  : "empty:",
                "jquery"                : "empty:",
                "jquery-cookie"         : "empty:",
                "leaflet"               : "empty:",
                "leaflet.markercluster" : "empty:",
                "moment"                : "empty:",
                "stringjs"              : "empty:",
                "text"                  : "../bower_components/requirejs-text/text",
                "typeahead"             : "empty:",
                "underscore"            : "empty:"
            },
            shim: {
                "bootstrap"      : ["jquery"],
                "jquery-cookie"  : ["jquery"],
                "typeahead"      : ["jquery"],
                "backbone-relational" : {
                    deps : ["backbone"],
                    exports: "Backbone"
                },
                "handlebars" : {
                    exports : "Handlebars"
                },
                "highcharts" : {
                    deps : ["jquery"],
                    exports: "Highcharts"
                },
                "leaflet": {
                    exports: "L"
                },
                "leaflet.markercluster" : {
                    deps: ["leaflet"],
                    exports: "L"
                }
            },
            deps: ["config"],
            include: ["almond", "main"],
            out: "<%= PATHS.BUILD %>js/<%= pkg.name %>.min.js"
        }
    }
}

我正在尝试遵循以下类似的内容： https://github.com/requirejs/example-libglobal或https://github.com/sahat/requirejs-library

正如您所看到的，我正在使用r.js优化器的wrap属性。这是我的包装开始和结束文件：

（开始）

(function(window, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory();
  } else {
    // Browser Global (ProjectB is your global library identifier)
    window.ProjectB = factory();
  }
}(this, function() {

（结束）

    //Register in the values from the outer closure for common dependencies
    //as local almond modules
    define('jquery', function () {
        return $;
    });

    define('underscore', function () {
        return _;
    });

    define('backbone', function () {
        return Backbone;
    });

    // Ask almond to synchronously require the
    // module value for 'ProjectB' here and return it as the
    // value to use for the public API for the built file.
    return require('ProjectB');
}));

当我在项目A中加载模块时，我得到：

require(["../projectB/js/projectb.min"],       function(ProjectB) {
    console.log("running Project B...");
    ProjectB.start();
});

  

未捕获错误：缺少高级图表

老实说，我真的不明白“结束换行”中的定义调​​用是怎么回事。我是否需要在Project A的requirejs文件中指定ProjectA和ProjectB的依赖关系？我想让ProjectA尽可能地保持苗条，并且只需将ProjectB打包。

关于如何做到这一点的任何想法？