jquery - Ladda Bootstrap med AMD-moduler och TypeScript

Jag försöker ladda Bootstrap med RequireJS och TypeScript AMD-moduler.

För närvarande har jag följande i min requireJS-konfiguration:

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

Sedan i en klass vill jag göra:

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

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

Vilket kompileras av TypeScript till:

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

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

Så problemet verkar vara att eftersom bootstrap utökar jquery och faktiskt inte används direkt så hamnar det inte i den kompilerade javascripten.

Jag kan bara inkludera en referens till bootstrap någonstans i min klass för att lösa problemet, men detta känns något felbenäget.

Vad missar jag?

Svar #1

Koden import bootStrap=require("bootstrap"); kommer inte att generera någon js om du inte använder det importerade namnet som en variabel. Detta gör att du kan göra lazy loading och bara importera typ som dokumenterat här.

Åtgärda :

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

Ännu bättre, flytta sådan kod till ui.ts och importera sedan den filen överallt, t.ex. ui.tsx.

Relaterade artiklar