erfordern - Wenn ich `module("somelib")` in TypeScript verwende, kann es nicht im Browser ausgeführt werden

Ich versuche, TypeScript mit AngularJS auf der Client-Seite zu verwenden.

Ich habe festgestellt, dass, wenn ich externe Module benutze, das erzeugte JS nicht im Browser ausgeführt wird.

controllers.ts

/// <reference path="./libs/underscore.d.ts"/>

import _ = module("underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

Der generierte JS wird sein:

var _ = require("underscore")
var test;
(function (test) {
    var Ctrl = (function () {
        function Ctrl($scope) {
            $scope.name = "Freewind";
            _.each($scope.name, function (item) {
            });
        }
        return Ctrl;
    })();
    test.Ctrl = Ctrl;    
})(test || (test = {}));

Das kann nicht richtig ausgeführt werden. Aber wenn ich den Teil module("underscore") entferne, wird es in Ordnung sein.

Da ich underscore.js in das HTML eingefügt habe, denke ich, dass etwas mit der require()-Methode nicht stimmt. Wie kann man das beheben?

Antwort #1

Es gibt zwei Möglichkeiten, Dinge in Ihre HTML-Seiten zu laden.

Bündelung

Die erste Möglichkeit besteht darin, alle Skriptdateien manuell in Ihre Seite einzufügen. Sie könnten eine Art Vorab-Veröffentlichungsschritt durchführen, um Ihren Code zusammenzuführen und zu minimieren - aber Sie übernehmen die Verantwortung dafür, anstatt es dem Code zu überlassen. Dies wird allgemein als Bündelung bezeichnet.

Im Fall des Bündelns verwenden Sie in Ihrem TypeScript-Code nur Referenzen (nicht Importe), wie folgt:

/// <reference path="./libs/underscore.d.ts"/>

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

Modul laden

Wenn Sie einen Modul-Loader verwenden möchten, der für das Web typischerweise RequireJS ist, können Sie externe Module mit der import-Anweisung laden. Normalerweise würden Sie in diesem Fall die Referenz nicht benötigen...

import _ = module("./libs/underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

RequireJS mit Nicht-Modulen

Es gibt ein drittes Szenario, das recht häufig vorkommt. Wenn Sie etwas importieren möchten, das kein externes Modul ist (wie jQuery, aber auch Underscore könnte in dieses Muster passen), ist es besser, eine Referenz und einen manuellen Aufruf von RequireJS zu verwenden.

RequireJS wird die Abhängigkeit für Sie laden, sodass Sie Ihr Hauptprogramm damit umschließen würden (das sich wahrscheinlich in einer separaten Datei wie app.ts befinden würde).

///<reference path="./libs/require.d.ts" />
///<reference path="./libs/underscore.d.ts" />

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

require(['underscore'], function (_) {
    var ctrl = new test.Crtl({});
});

Sie können auch require.config verwenden, um den Pfad zu Underscore in Ihrer Anwendung anzugeben.

  require.config({
    paths: {
        "underscore": "libs/underscore"
    }
  });

Antwort #2

Wenn Sie require verwenden, behaupten Sie, dass underscore als ladbares Modul exportiert wird. Dies setzt außerdem voraus, dass Sie irgendein Modul-Ladesystem verwenden (TypeScript unterstützt derzeit AMD- und CommonJS-Module). Da Sie kein Modulsystem verwenden und underscore einfach im globalen Umfang verfügbar ist, können Sie eine ///-Referenz verwenden, um TypeScript mitzuteilen, dass Underscore im globalen Umfang verfügbar ist. Setzen Sie Folgendes an den Anfang Ihrer Datei:

/// <reference path="./libs/underscore.d.ts">