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

Question

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

目标

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

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

问题一

'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 等，所以我最终创建了一堆如下所示的“ stub ”模块:

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

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

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

然后我在构建文件中引用它们。它们由 r.js 内联，然后我可以在没有 require 的环境中发布一个使用 require(好吧，almond)的库。另外，更改构建文件使其指向模块的真实版本也很简单。所以现在构建文件看起来像这样:

({
    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'
    }
})