Shim推特RequireJS启动

Question

RequireJS 文档说，要支持早期版本的IE，您需要配置enforceDefine: true。

因此，如果您希望支持Internet，捕获加载错误，并通过直接定义()调用或shim具有模块化代码，则始终将enforceDefine设置为true。有关示例，请参见下一节。 注意:如果您确实设置了enforceDefine: true，并且使用data- main ="“加载您的主JS模块，那么这个主JS模块必须调用define()来加载它所需的代码。主JS模块仍然可以调用require/requirejs来设置配置值，但是对于加载模块，它应该使用define()。

由于Twitter引导程序不是AMD模块，所以我需要对它进行调整以使其正常工作。这就是我配置它的方式；

<script type="text/javascript">
    var require = {
        paths: {
            "bootstrap": "../bootstrap",
            "jquery": "../jquery-1.8.2"
        },
        shim: {
            "bootstrap": ["jquery"]
        },
        enforceDefine: true
    };
</script>

稍后，当我的模块希望引导作为依赖项时，我仍然会收到一条错误消息；

Error: No define call for bootstrap

http://requirejs.org/docs/errors.html#nodefine

如果我对文档的理解是正确的，那么enforceDefine应该忽略shims，但它不是。

我在这里做错什么了？

Answer 1

根据这些文档，如果“脚本是shim配置的一部分，该配置指定了一个全局字符串属性，可以检查该属性是否加载，并且检查失败，则会引发错误”。

要解决这个问题，您需要在shim中添加导出值，以便RequireJS可以检查脚本是否已成功加载。在引导的情况下，这有点棘手，因为Bootstrap并不‘导出’一个属性全局变量，只有一堆jquery，但是您可以使用这些插件中的任何一个作为导出值，例如$.fn.popover

{
    paths: {
        "bootstrap": "../bootstrap",
        "jquery": "../jquery-1.8.2"
    },
    shim: {
        "bootstrap": {
          deps: ["jquery"],
          exports: "$.fn.popover"
        }
    },
    enforceDefine: true
}

Answer 2

我将引导JS转换为一个模块，而不是使用shim执行魔术：

define([ "jquery" ], function($) {
  // bootstrap JS code
});

我在论坛和堆栈溢出中找到的其他所有东西都不适合我，因为我从CDN获得了jQuery。我想是因为我遇到了requireJS文档在http://requirejs.org/docs/api.html上描述的问题

不要将CDN加载与生成中的shim混合使用。示例场景:从CDN加载jQuery，但使用shim加载类似于依赖于jQuery的主干的库存版本。在进行构建时，请确保在构建的文件中内联jQuery，并且不要从CDN加载它。否则，主干将在构建的文件中内联，并在CDN加载的jQuery加载之前执行。这是因为shim只是延迟了文件的加载，直到加载了依赖关系，但是没有进行任何自动包装定义。构建后，依赖项已经内联，shim配置不能将非定义()d代码的执行延迟到以后。define ()d模块在构建后确实可以使用CDN加载的代码，因为它们正确地将源代码封装在定义工厂函数中，直到加载依赖关系才能执行。所以教训: shim config是用于非模块化代码、遗留编解码器的一个停止间隔度量。定义()d模块更好。

将引导转换成一个普通的AMD模块并移除shim配置，为我解决了这个问题。唯一的缺点:您不能从引导CDN中检索引导。

Answer 3

我在我的项目中使用这个配置：

startup.js

require.config({
    paths: {
        /* other paths are omitted */
        'bootstrap': '../libs/bootstrap'
    },
    shim: {
        'bootstrap/bootstrap-slider': { deps: ['jquery'], exports: '$.fn.slider' }, 
        'bootstrap/bootstrap-affix': { deps: ['jquery'], exports: '$.fn.affix' },
        'bootstrap/bootstrap-alert': { deps: ['jquery'], exports: '$.fn.alert' },
        'bootstrap/bootstrap-button': { deps: ['jquery'], exports: '$.fn.button' },
        'bootstrap/bootstrap-carousel': { deps: ['jquery'], exports: '$.fn.carousel' },
        'bootstrap/bootstrap-collapse': { deps: ['jquery'], exports: '$.fn.collapse' },
        'bootstrap/bootstrap-dropdown': { deps: ['jquery'], exports: '$.fn.dropdown' },
        'bootstrap/bootstrap-modal': { deps: ['jquery'], exports: '$.fn.modal' },
        'bootstrap/bootstrap-popover': { deps: ['jquery'], exports: '$.fn.popover' },
        'bootstrap/bootstrap-scrollspy': { deps: ['jquery'], exports: '$.fn.scrollspy'        },
        'bootstrap/bootstrap-tab': { deps: ['jquery'], exports: '$.fn.tab' },
        'bootstrap/bootstrap-tooltip': { deps: ['jquery'], exports: '$.fn.tooltip' },
        'bootstrap/bootstrap-transition': { deps: ['jquery'], exports: '$.support.transition' },
        'bootstrap/bootstrap-typeahead': { deps: ['jquery'], exports: '$.fn.typeahead'  },
    }
});

require(['domReady', 'app'], function(domReady, app) {
    domReady(function() {
        app.init();
    });
});

然后在我的代码中我使用如下：

define(['jquery', 'underscore', 'backbone', 'text!templates/photos-list.html'], function($, _, Backbone, html) {
    var PhotosListView = Backbone.View.extend({
        viewImageFullscreen: function(e) {
            e.preventDefault();

            require(['bootstrap/bootstrap-modal', 'text!templates/photo-modal.html'], function(modal, htmlModal) {
                 var modalTemplate = _.template(htmlModal, options);
                 $('body').append(modalTemplate);

                 // setup
                 $(selector + '_modal').modal({
                     backdrop: true,
                     keyboard: true,
                     show: false
                 }).css({
                     'width': function() { return ($(document).width() * 0.55) + 'px'; },
                     'margin-left': function() { return -($(this).width() * 0.5); }
                 });

                 // trigger `modal` 
                 $(selector + '_modal').modal('show');
             }); // require() call
         // ...