Question

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

目标

使用r.js构建一个简化的缩小JS文件，其中只包含我们的库代码，而不包括Backbone，Handlebars等依赖项，因为其他应用程序已经包含它们。
使用杏仁以免需要。

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

问题一

'empty：'标识仅适用于Backbone，Marionette和jQuery。如果我重新介绍当前在构建文件中注释掉的任何行，我最终会收到错误。如何从最终的concated和minified文件中删除依赖项？为什么会出现这些错误？

错误：

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（well，almond）的库。另外，更改构建文件以使其指向模块的真实版本是微不足道的。所以现在buildfile看起来像这样：

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

使用r.js打包Javascript库时需要输入

目标

问题一

问题二

1 个答案: