Website-Suche

ecmascript 6 - Wie man ein einzelnes ES6-Modul aus mehreren TypeScript-Dateien erstellt (für eine Frontend-Bibliothek)

Der Code meiner Frontend-Bibliothek ist in mehrere Quellcodedateien aufgeteilt.

Beispiel :

// a.ts
function a() {}

// b.ts
function b() {}

// main.ts
const myLib = {
    a: a,
    b: b
}

Ich muss ein ES6-Modul (d.h. eine JavaScript-Datei) erstellen, das nur myLib als Standardexport exportiert.

Ich sehe zwei Optionen. Die erste:

  1. Führen Sie tsc aus, um jede Datei in JavaScript zu kompilieren;
  2. Fassen Sie alle generierten JS-Dateien zu einer einzigen Datei my-lib.js zusammen;
  3. Fügen Sie den von ES6 benötigten Code hinzu (export …).

Der zweite:

  1. Fassen Sie alle TypeScript-Dateien in einer einzigen Datei my-lib.ts zusammen;
  2. Fügen Sie den Export hinzu: export default myLib;
  3. Führen Sie tsc auf der zusammengefügten Datei aus.

Beide Optionen sind hässlich und verlieren die map-Datei.

Gibt es einen besseren Weg, das zu tun?

Antwort #1

Der richtige Weg ist, eine Barrel-Datei zu erstellen, die die Module erneut exportiert.

// foo/a.ts
export function a() {}

// foo/b.ts
export function b() {}

// foo/index.ts
export {a} from './a';
export {b} from './b';

Dann in Ihrem Verbraucher:

import {a, b} from './foo';

a();
b();

Antwort #2

Ich füge eine Antwort hinzu, weil heute der richtige Weg für eine Frontend-Bibliothek die Verwendung von Rollup ist.

Schreiben Sie zuerst ES6-Module, import und export sie:

// file-a.ts
export function a() {}

// file-b.ts
export function b() {}

// main.ts
export { a } from "./file-a"
export { b } from "./file-b"

Kompiliere dann den Code zu JavaScript mit tsc und der Option module, die auf "es6" gesetzt ist.

Lassen Sie dann Rollup ein flaches Bundle aus dem JavaScript-Code erstellen. Für den obigen Code erstellt Rollup dieses Bundle:

function a() {}
function b() {}
export { a, b };

Siehe auch:

  • Das Rollup REPL: https://rollupjs.org/repl
  • Der Artikel: Webpack und Rollup: gleich, aber unterschiedlich

Hinweis: Die endgültige Lösung zum Erstellen der Definitionsdatei (.d.ts) ist noch nicht implementiert (März 2018). Ich füge weiterhin Dateien mit einem Node.js-Skript zusammen, um exportierte Typen in einer einzigen TypeScript-Definitionsdatei zu erzeugen.

Verwandte Artikel