使用 r.js 打包 Javascript 库所需的输入

Question

我们小组一直在使用 requirejs 来开发基于 Backbone、Marionette 和 Handlebars 的内部 UI 小部件库。我们希望将此库分发给我们组织中的其他组，这些组的应用程序不使用 require 或任何其他类型的 AMD 兼容模块加载机制。

目标

• 使用 r.js 构建一个连接和缩小的 JS 文件，其中仅包含我们的库代码，不包含 Backbone、Handlebars 等依赖项，因为其他应用程序已经包含它们。
• 使用杏仁，这样就不需要了。

根据我所阅读的所有内容，这似乎应该是可能的，尽管我很难开始使用它。

问题一

'empty:' 名称仅适用于 Backbone、Marionette 和 jQuery。如果我重新引入当前在构建文件中注释掉的任何行，我最终会得到错误。如何从最终连接和缩小的文件中删除依赖项？为什么会出现这些错误？

错误：

Tracing dependencies for: main
TypeError: string is not a function
In module tree:
    main
      modal
        Modal/javascript/controllers/modal.simple.controller
          Modal/javascript/views/modal.simple.views
            hbs

Error: TypeError: string is not a function
In module tree:
    main
      modal
        Modal/javascript/controllers/modal.simple.controller
          Modal/javascript/views/modal.simple.views
            hbs

我的构建文件如下所示：

({
    baseUrl: '.',
    name: 'main',
    out: 'uitoolkit.js',    
    mainConfigFile: 'main.js',
    paths: {
        'jquery': 'empty:',
        'backbone': 'empty:',
        'marionette': 'empty:'
        /* ,
        'underscore': 'empty:',
        'handlebars': 'empty:',
        'hbs': 'empty:',
        'json2': 'empty:',
        'i18nprecompile': 'empty:'
        */
    }
})

main.js 看起来像这样：

require.config({
    locale : "en_us",

    // default plugin settings, listing here just as a reference
    hbs : {
        templateExtension : 'hbs',
        // if disableI18n is `true` it won't load locales and the i18n helper
        // won't work as well.
        disableI18n : true
    },

    paths: {
        'modal': 'Modal/javascript/widget',
        'notifications': 'Notifications/javascript/widget',
        'select': 'Select/javascript/widget',
        'wizard': 'Wizard/javascript/widget',
        'jquery': 'bower_components/jquery/jquery',
        'backbone': 'bower_components/backbone/backbone',
        'underscore': 'bower_components/underscore/underscore',
        'handlebars': 'bower_components/handlebars/handlebars',
        'marionette': 'bower_components/backbone.marionette/lib/backbone.marionette',
        'hbs' : 'bower_components/require-handlebars-plugin/hbs',
        'json2':'bower_components/json2/json2',
        'i18nprecompile' : 'bower_components/require-handlebars-plugin/hbs/i18nprecompile',
        'application': 'app'
},

shim: {
        underscore: {
            exports: '_'
        },

        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },

        marionette: {
            deps : ['jquery', 'underscore', 'backbone', 'handlebars'],
            exports: 'Marionette'
        },

        handlebars: {
            exports: 'Handlebars',
            init: function() {
                this.Handlebars = Handlebars;
                return this.Handlebars;
            }
        },

        json2: {
             exports: 'JSON'
        },

        application: {
            exports: 'Application'
        },
    },

    baseUrl : './'
});

require(
    [
        'application',
        'modal',
        'notifications',
        'select',
        'wizard'
    ], 

    function(Application, modal, notifications, select, wizard) {
        var uitoolkit = $.namespace('com.namespace.uitoolkit');

        uitoolkit.modal = modal;
        uitoolkit.notifications = notifications;
        uitoolkit.select = select;
        uitoolkit.wizard = wizard;

        return uitoolkit;
    }
);

问题二

我什至不知道从哪里开始介绍杏仁。这是我要包含在 main.js 中的东西吗？这是否会实现我的想法，即让我们可以选择将库分发给不使用 require/AMD 的开发人员？

提前非常非常感谢您。

Answer 1

在 requirejs 列表上得到一个真正的好人那里的答案。

由于我不能在自己的构建中包含 jQuery、Backbone 等，我最终创建了一堆看起来像这样的“存根”模块：

// stubs/jquery:
define(function() {
    return window.jQuery;
}

// stubs/underscore:
define(function() {
    return window._;
}

// stubs/backbone:
define(function() {
    return window.Backbone;
}

然后我在我的构建文件中引用它们。它们由 r.js 内联，然后我可以在一个不需要方便的环境中发布一个使用 require（嗯，杏仁）的库。另外，更改构建文件以使其指向模块的真实版本是微不足道的。所以现在构建文件看起来像这样：

({
    baseUrl: '.',

    name: 'bower_components/almond/almond',

    include: ['main'],

    out: 'uitoolkit.js',    

    mainConfigFile: 'main.js',

    // optimize: 'none',

    wrap: true,

    paths: {
        'jquery': './js/stubs/jquery',
        'backbone': './js/stubs/backbone',
        'marionette': './js/stubs/marionette',
        'underscore': './js/stubs/underscore',
        'handlebars': './js/stubs/handlebars', 
        'json2': './js/stubs/json2'
    }
})