Verwenden von Typescript im Browser

Question

Ich habe in letzter Zeit viel mit diesem Problem gekämpft. Ich erstelle ein neues Typescript-Projekt und versuche herauszufinden, wie man Typescript am besten mit einer Datenbank verbindet und die Ergebnisse im Browser anzeigt. Aber ich bin immer Konsole Fehler im Browser wie folgt:

Uncaught ReferenceError: exports is not defined ("export class Database") 

Uncaught ReferenceError: require is not defined ("import {Database} from "./Database";") 

Von dem, was ich sagen kann, ich bin immer den Fehler, da die Dateien auf einem Commonjs Modul wird transpiled werden, die der Browser nicht verstehen kann.

Meine Frage ist: Ist dies die richtige Diagnose des Problems? Wenn ja, wie kann ein Problem so gelöst werden?

Ein Ansatz aus meiner Forschung sagt WebPack oder Browserify zu verwenden, und andere schlagen vor, AMD/SystemJS oder RequireJS zu verwenden. Ich bin gespannt, ob dies mit Gulp und Webpack erledigt werden kann, aber ich bin mir nicht sicher, wo ich überhaupt anfangen soll oder wie das in den Workflow passt.

Datenbank Klasse

export class Database{ 
    //... 
} 

Mongo Klasse

<reference path="../../../typings/browser/ambient/node/index.d.ts" /> 
<reference path="../../../typings/browser/ambient/mongodb/index.d.ts" /> 

    import {IDatabase} from "../interfaces/IDatabase"; 
    import {Database} from "./Database"; 
    import {MongoClient} from "mongodb"; 

    class MongoDB extends Database implements IDatabase{ 
     //... 
    } 

Datenbank-Schnittstelle

export interface IDatabase{ 
    //... 
} 

TSConfig Optionen

"target": "es6", 
"module": "commonjs", 
"moduleResolution": "classic", 
"sourceMap": true, 

Answer 1

Ich habe mein Problem herausgefunden. Ich habe diese Dateien direkt auf der Seite "index.html" referenziert, was nicht nötig war. Was getan werden musste, war, die Referenz so zu ändern, dass der Node-Controller wusste, wo sich die Dateien befanden, und nicht die Indexseite. Danach, und beim Kompilieren, hat der Export und die Anforderung gut funktioniert.

Answer 2

Hier sind einige Ressourcen zum Einstieg:

1. Webpack: link
2. Gulp + webpack: link
3. Browserify: link
4. Systemjs: link, link
5. requirejs: link
6. Probenschluckaufgabe: link
7. Beispielgrund systemjs config in index.html: link

Es gibt keine ‚beste Weg‘ es auf die Besonderheiten Ihrer Anwendung ab. Wenn Sie alle App als eine einzige js-Datei bündeln wollen/können - webpack oder browserify. Sonst - systemjs, vielleicht requiresjs. Meine persönliche Vorliebe ist Schluck + Systemjs. Aber wie Links 1-5 zeigt, kann es mit jedem Loader durchgeführt werden.

Browser können bisher JavaScript-Module nicht laden und brauchen so genannte Loader (das ist Webpack, requirejs, systemjs, browserify), um die Aufgabe zu erledigen. Aus diesem Grund sehen Sie Fehler, die Sie angegeben haben. Um sie los zu werden - wählen Sie einen der Lader, konfigurieren Sie ihn und die Fehler verschwinden.

Hoffe, das wird Ihnen helfen, zu beginnen.