I am attempting to incorporate Bootstrap into my project using RequireJS alongside typescript AMD modules.
Currently, my requireJS configuration looks like this:
require.config({
shim: {
bootstrap: { deps: ["jquery"] }
},
paths: {
jquery: "//code.jquery.com/jquery-2.1.4.min",
bootstrap: "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min",
d3: "//d3js.org/d3.v3.min"
}
});
In one of my classes, I have the following code snippet:
import jq = require("jquery");
import bootStrap = require("bootstrap");
class test {
public doStuff(): void {
jq("#test").carousel();
}
}
This TypeScript code gets compiled into:
define(["require", "exports", "jquery"], function (require, exports, jq) {
var testViewModel = (function () {
function testViewModel() {
}
testViewModel.prototype.doStuff = function () {
jq("#test").carousel();
};
return testViewModel;
})();
})
The issue seems to arise because Bootstrap extends jQuery but is not directly used in the code outputted by the compiler.
To solve this, I can include a reference to Bootstrap within my class, although this approach feels somewhat error-prone.
What could be missing in my implementation?