Shim Twitter Bootstrap for RequireJS

RequireJS 文档说,要支持旧版本的IE,你需要configurationenforceDefine: true

所以,如果你想支持Internet Explorer,捕捉加载错误,并通过直接define()调用或填充configuration模块化代码,总是设置enforceDefine为true。 请参阅下一部分的示例。

注意:如果你设置了enforceDefine:true,并且你使用了data-main =“”加载你的主JS模块,那么这个主JS模块必须调用define()而不是require()来加载它需要的代码。 主JS模块仍然可以调用require / requirejs来设置configuration值,但是对于加载模块,它应该使用define()。

由于Twitter Bootstrap不是AMD模块,因此我需要为它启动而努力。 这是我如何configuration它;

 <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应该忽略垫片,但不是。

我在这里做错了什么?

根据文档说,如果“脚本是指定全局string属性,可以检查加载,并检查失败的填充configuration的一部分脚本的错误。

为了解决这个问题,你需要在shimconfiguration文件中添加exports值,以便RequireJS可以检查脚本是否被成功载入。 在引导程序的情况下,这有点棘手,因为Bootstrap不会“导出”一个全局variables只有一堆jQuery插件,但你可以使用任何插件作为出口值,例如$.fn.popover

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

而不是用垫片做魔术,我把自举JS转换成一个模块:

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

我在论坛和stackoverflow中find的其他东西都不适用于我,因为我从CDN获取jQuery。 我假设是因为我遇到http://requirejs.org/docs/api.html上的requireJS文档中描述的问题;

不要在构build中将CDN加载与shimconfiguration混合。 示例场景:从CDN加载jQuery,但使用shimconfiguration来加载类似于依赖于jQuery的Backbone的股票版本。 在构build时,请确保在构build的文件中内联jQuery,并且不要从CDN加载它。 否则,Backbone将被内置在构build的文件中,并且会在载入CDN的jQuery之前执行。 这是因为shimconfiguration只是延迟加载文件,直到依赖加载,但不做任何自定义的自动换行。 在构build之后,依赖关系已经被内联,shimconfiguration不能延迟执行非define()的d代码,直到稍后。 define()'d模块在编译后可以使用CDN加载的代码,因为它们将自己的源代码正确地封装在定义工厂函数中,直到加载依赖关系才会执行。 所以课程:shim config是非模块化代码,遗留代码的一个权宜之计。 define()'d模块更好。

将bootstrap转换成一个普通的AMD模块,并删除shimconfiguration文件解决了我的问题。 唯一的缺点:你不能从引导CDN检索bootstrap。

我在我的项目中使用这个configuration:

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 // ... 

@lexeme&@benjaminbenben如何将这个概念包装在创build填充程序的RequireJS插件中,需要jQuery并返回jQuery,因此您不需要手动包含它?

要使用引导程序组件,只需使用:

 define(['bootstrap!tooltip'], function($){ $('[data-toggle="tooltip"]').tooltip(); }); 

你可以使用这个require-bootstrap-plugin来使它工作。