jquery - 使用 AMD 模块和 typescript 加载 Bootstrap

我正在尝试使用 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 中。

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

我错过了什么？

最佳答案

代码 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 。

关于jquery - 使用 AMD 模块和 typescript 加载 Bootstrap，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33521138/