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

然后在 class 我想做的是：

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.

我可以在我的 class 中的某个地方包含对 bootstrap 的引用来解决这个问题，但这感觉有点容易出错。

我错过了什么？

Answer 1

代码import bootStrap = require("bootstrap");不会生成任何js，除非你使用导入的名称作为变量。这允许您将 lazy loading 和 importing type only 作为 documented here.

修复：

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

最好将此类代码移动到 ui.ts 中，然后在任何地方导入该文件，例如ui.tsx.

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

Loading Bootstrap with AMD Modules and typescript

jquery

twitter-bootstrap

requirejs

typescript

amd

修复：