twitter-bootstrap 无法使用 RequireJS 加载 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16259098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't load Bootstrap with RequireJS
提问by Teodor Talov
I can't seem to figure out how to load Bootstrap via RequireJS. None of the examples that I found worked for me.
我似乎无法弄清楚如何通过 RequireJS 加载 Bootstrap。我发现的所有例子都不适合我。
Here is my shim:
这是我的垫片：
require.config({
// Sets the js folder as the base directory for all future relative paths
baseUrl: "./js",
urlArgs: "bust=" + (new Date()).getTime(),
waitSeconds: 200,
// 3rd party script alias names (Easier to type "jquery" than "libss/jquery, etc")
// probably a good idea to keep version numbers in the file names for updates checking
paths: {
// Core libsraries
// --------------
"jquery": "libs/jquery",
"underscore": "libs/lodash",
"backbone": "libs/backbone",
"marionette": "libs/backbone.marionette",
// Plugins
// -------
"bootstrap": "libs/plugins/bootstrap",
"text": "libs/plugins/text",
"responsiveSlides": "libs/plugins/responsiveslides.min",
'googlemaps': 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDdqRFLz6trV6FkyjTuEm2k-Q2-MjZOByM&sensor=false',
// Application Folders
// -------------------
"collections": "app/collections",
"models": "app/models",
"routers": "app/routers",
"templates": "app/templates",
"views": "app/views",
"layouts": "app/layouts",
"configs": "app/config"
},
// Sets the configuration for your third party scripts that are not AMD compatible
shim: {
"responsiveSlides": ["jquery"],
"bootstrap": ["jquery"],
"backbone": {
// Depends on underscore/lodash and jQuery
"deps": ["underscore", "jquery"],
// Exports the global window.Backbone object
"exports": "Backbone"
},
"marionette": {
// Depends on underscore/lodash and jQuery
"deps": ["backbone", "underscore", "jquery"],
// Exports the global window.Backbone object
"exports": "Marionette"
},
'googlemaps': { 'exports': 'GoogleMaps' },
// Backbone.validateAll plugin that depends on Backbone
"backbone.validate": ["backbone"]
},
enforceDefine: true
});
and here is how I call Bootstrap:
这是我调用 Bootstrap 的方式：
define([
"jquery",
"underscore",
"backbone",
"marionette",
"collections/Navigations",
'bootstrap',
],
function($, _, Backbone, Marionette, Navigations, Bootstrap){
The error that I get is this:
我得到的错误是这样的：
Uncaught Error: No define call for bootstrap
Any ideas on how to get this resolved?
关于如何解决这个问题的任何想法？
回答by Teodor Talov
I found a working example here:
我在这里找到了一个工作示例：
https://github.com/sudo-cm/requirejs-bootstrap-demo
https://github.com/sudo-cm/requirejs-bootstrap-demo
I followed it to get my code to work.
我跟着它让我的代码工作。
According to that demo, especially app.js, you simply make a shim to catch Bootstrap's dependency on jQuery,
根据那个演示，尤其是app.js，你只需制作一个垫片来捕捉 Bootstrap 对 jQuery 的依赖，
requirejs.config({
// pathsオプションの設定。"module/name": "path"を指定します。拡張子（.js）は指定しません。
paths: {
"jquery": "lib/jquery-1.8.3.min",
"jquery.bootstrap": "lib/bootstrap.min"
},
// shimオプションの設定。モジュール間の依存関係を定義します。
shim: {
"jquery.bootstrap": {
// jQueryに依存するのでpathsで設定した"module/name"を指定します。
deps: ["jquery"]
}
}
});
and then mark Bootstrap as a dependency of the app itself, so that it loads before app.js.
然后将 Bootstrap 标记为应用程序本身的依赖项，以便它在app.js.
// require(["module/name", ...], function(params){ ... });
require(["jquery", "jquery.bootstrap"], function ($) {
$('#myModalButton').show();
});
Finally, since app.jsis the data-main,
最后，由于app.js是数据主，
<script type="text/javascript" src="./assets/js/require.min.js" data-main="./assets/js/app.js"></script>
Bootstrap's JS is guaranteed to load before any application code.
Bootstrap 的 JS 保证在任何应用程序代码之前加载。
回答by fcortes
Bootstrap lib does not return any object like jQuery, Underscore or Backbone: this script just modifies the jQuery object with the addition of new methods. So, if you want to use the Bootstrap library, you just have to add in the modules and use the jquery method as usual (without declarating Bootstrap like param, because the value is undefined):
Bootstrap lib 不返回任何对象，如 jQuery、Underscore 或 Backbone：此脚本只是通过添加新方法来修改 jQuery 对象。所以，如果你想使用 Bootstrap 库，你只需要像往常一样添加模块并使用 jquery 方法（无需像 param 那样声明 Bootstrap，因为值为undefined）：
define([
"jquery",
"underscore",
"backbone",
"marionette",
"collections/Navigations",
"bootstrap",
],
function($,_,Backbone,Marionette,Navigations){
$("#blabla").modal("show"); //Show a modal using Bootstrap, for instance
});
回答by Sam T
I found it was sufficient to add the following to my requirejs.config call (pseudocode):
我发现将以下内容添加到我的 requirejs.config 调用（伪代码）中就足够了：
requirejs.config({
...
shim: {
'bootstrap': {
deps: ['jquery']
}
}
});
回答by Playnox
I like to use Require.Js ORDERplugin, what it does? Simply loads all your Libraries in order, in this case you won't get any errors, ohh and bootstrap depends on jQuery, so we need to use shimin this case:
我喜欢使用 Require.Js ORDER插件，它有什么作用？只需按顺序加载所有库，在这种情况下你不会得到任何错误，哦，引导程序依赖于jQuery，所以在这种情况下我们需要使用shim：
requirejs.config({
baseUrl: "./assets",
paths: {
order: '//requirejs.org/docs/release/1.0.5/minified/order',
jquery: 'http://code.jquery.com/jquery-2.1.0.min',
bootstrap: '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min'
},
shim: {
'bootstrap': {
deps:['jquery']
}
}
});
require(['order!jquery', 'order!bootstrap'], function($) {
});
