使用AMD模块和打字稿加载Bootstrap

时间:2015-11-04 11:50:55

标签: jquery twitter-bootstrap requirejs typescript amd

我正在尝试使用RequireJS和打字稿AMD模块加载Bootstrap。

目前我在requireJS配置中有以下内容:

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"
    }
});

然后在我希望做的课程中:

import jq = require("jquery");
import bootStrap = require("bootstrap");

class test {
    public doStuff(): void {
        jq("#test").carousel();
    }
}

由打字稿编译成:

define(["require", "exports", "jquery"], function (require, exports, jq) {
    var testViewModel = (function () {
        function testViewModel() {
        }
        testViewModel.prototype.doStuff = function () {

            jq("#test").carousel();
        };
        return testViewModel;
    })();
})

所以问题似乎是因为bootstrap扩展了jquery并且实际上没有直接使用它不会输出到已编译的javascript中。

我可以在我的课程中的某处包含一个引导程序来修复问题,但这有点容易出错。

我错过了什么?

1 个答案:

答案 0 :(得分:3)

除非您使用导入的名称​​作为变量,否则代码import bootStrap = require("bootstrap");不会生成任何js。这样,您就可以lazy loadingimporting type only作为documented here

修复:

import jq = require("jquery");
import bootStrap = require("bootstrap");
let bs = bootStrap; 

更好地将此类代码移至ui.ts,然后在任何地方导入该文件,例如ui.tsx