Repository navigation
Bootstrap and Require.js? #2579
Description
Activity
I've done this. Assuming you are also using jQuery v1.7.1:
1. Create a "require-jquery.js" file by concatenating requireJS and jQuery. In Windows, the command is: type require.js jquery.js > require-jquery.js In linux, replace "type" with "cat" 2. You'll need to concatenate all the JS file of bootstrap into a single file as well. Look into the bootstrap package for a minified version of bootstrap's javascript or do it yourself with the command shown above and your favorite minimizer. 3. Create a new JS file, let's call it "core.js": require.config({ baseUrl: '/assets/js/', paths: { bootstrap: 'bootstrap', // Omitted the .js as requireJs will add it automagically // And so on for other frameworks/utils } }); define( 'core', [ 'jquery', 'bootstrap', ], function ( $ ) { // jQuery and bootstrap have been loaded return $; } ); 4. Put all your js files in /assets/js 5. Remove all your script references in your index.html file, and add this one instead: <script data-main="/assets/js/core.js" src="assets/js/require-jquery.js"></script>BenjiZombie
I think the more appropriate way is to use the shim feature of requireJS. See stackoverflow article:
http://stackoverflow.com/questions/13377373/shim-twitter-bootstrap-for-requirejsAlso, you can use the Bootstrap CDN - http://www.bootstrapcdn.com/
How can this be done in BS4?
Well, I made the whole thing work, but I'm sure that I did not use the best approach.
I ended up getting it going using:
requirejs.config({ "baseUrl": "js/lib", "paths": { "jquery": "jquery", "app": "../app", "bootstrap": "bootstrap/js/bootstrap.bundle", "bootbox": "bootbox.min" }, "shim": { "bootstrap": { "deps": ["jquery"], "exports": "$" }, // 'underscore': { // exports: '_' // }, "main": { "deps": ["jquery","bootstrap"] } }, map: { // When bootbox requires jquery, give it bootstrap instead. This makes it so that // bootstrap is **necessarily** loaded before bootbox. bootbox: { jquery: "bootstrap", } } }); require(['jquery','bootbox'], function($, bootbox){ $(function(jquery) { bootbox.alert("bla") }); });Seems to do the trick :)
Looking this way, it wouldn't be more simple to just define bootstrap as a bootbox dependency in the shim object?
I'm not sure - I tried that and couldn't get it to work like that (ended up posting a question on StackOverflow)
Cheers
Andy
Could ya link the question here?
- Reacted by Luiz Machado
I'm using SystemJS instead of requireJS now. System works a lot better than require and it is easy to switch from one to another. 😁
Is Bootstrap.js compatible with Require.js? If so, can a reference to configuration code be shared?