使用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 。