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

Question

我正在尝试使用RequireJS和typescript 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();
    }
}

这是由typescript编译成：

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中。

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

我错过了什么？

Answer 1

代码import bootStrap = require("bootstrap"); 除非您使用导入的名称作为变量，否则不会生成任何js。 这允许您importing type only执行lazy loading和importing type only ，如此处所述 。

修复：

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

甚至可以更好地将这些代码移动到ui.ts然后将文件导入到任何地方，例如ui.tsx 。