Website-Suche

javascript - Die beste Möglichkeit, ein JS-Objekt zwischen einem Typescript-Frontend und einem NodeJs-Backend zu teilen

Ich schreibe eine Anwendung, die Angular2 mit Typescript als Frontend und NodeJS als Backend verwendet. Ich habe ein JavaScript-Objekt geschrieben, das ich zwischen Frontend und Backend teilen möchte. Was ist der eleganteste Weg, dies zu tun?

Meine ursprüngliche Idee war es, eine .d.ts für das Frontend zu schreiben und ein module.exports in der JavaScript-Datei hinzuzufügen, damit das Backend require('myobject') verwenden könnte.

Obwohl dies funktioniert, verursacht dies, dass der Browser eine Ausnahme auslöst, die in der Browser-Konsole angezeigt wird: 'Uncaught ReferenceError: module is not defined'.

Und ich möchte meine Konsole nicht mit unnötigen Fehlermeldungen verschmutzen. Gibt es also eine andere, elegantere Möglichkeit, dies zu tun?

Antwort #1

Der „sauberste“ Weg, den ich kenne, dies zu tun, besteht darin, modulare Skripte auf beiden Seiten zu schreiben und eine Bibliothek von Objekten zu erstellen, die Sie teilen möchten (sodass die geteilten Objekte an einem einzigen Ort definiert sind)

Aufbau

Frontend: TypeScript mit entweder

  • Ziel ES6, Modul: commonjs + Babel (erfordert Typescript 1.7)
  • oder Ziel ES5, Modul: commonjs

mit webpack oder browserify gebündelt

Backend: ES6 (mit --harmony-Flag auf Node) oder ES5

Bibliothek

Erstellen Sie eine Bibliothek, zum Beispiel shared, geschrieben in Typescript, und erstellen Sie die exportierte Objektklasse

export default class MyObject{ ... }

Stellen Sie sicher, dass die Bibliothek mit declaration: true kompiliert wird (zum Beispiel in tsconfig): tsc wird das JS + die Typdefinitionen (Deklarationen) erzeugen.

Stellen Sie in der package.json der shared-Bibliothek sicher, dass der Eintrag typings auf die generierte MyObject.d.ts-Datei zeigt. Wenn es mehrere Objekte gibt, erstellen Sie eine index.ts-Datei, die alle Objekte erneut exportiert, und setzen Sie typings auf index.d.ts.

Verwendung

Frontend: Da Sie jetzt modulare JS/TS verwenden, importieren Sie Ihr Objekt direkt aus TypeScript

import MyObject from 'shared'

Der TypeScript-Transpiler wird automatisch die .d.ts-Definition aus dem typings-Eintrag der package.json von shared finden.

Backend: einfach require('shared')

Hinweis: Wenn es mehrere gemeinsame Objekte gibt, verwenden Sie keine Standard-Exporte in shared: diese können nicht erneut exportiert werden.

Verwandte Artikel