Moment: Unterstützung für ESM-fähige Bundler hinzufügen

Erstellt am 12. Nov. 2019  ·  3Kommentare  ·  Quelle: moment/moment

Hallo!

Vielen Dank für diese tolle Bibliothek!

Ich glaube jedoch, dass das Feld "module" im Paketmanifest (Datei package.json ) auf das ESM-Bundle zeigen sollte, zB ./src/moment.js .

Bundler, die ESM unterstützen (Webpack, Rollup und andere), sollten in der Lage sein, das ESM-Bundle mithilfe des Felds module zu finden, um moderne Optimierungstechniken (wie das Schütteln von Bäumen) verwenden zu können. Im Moment wird stattdessen das ./moment.js UMD-Bundle verwendet.

Dadurch wird die gesamte Bibliothek in ESM-fähige Projekte geladen, selbst wenn Sie ein einzelnes Symbol daraus importieren.

Zum Beispiel ein Import wie folgt:

import { isMoment } from 'moment';

importiert alles aus der Bibliothek, es wurde jedoch nur eine Funktion angefordert.

Und Sie können import { isMoment } from 'moment/src/moment'; als Problemumgehung in TypeScript-Projekten verwenden, da dadurch die Typisierung unterbrochen wird.

BuilRelease Help Wanted

Hilfreichster Kommentar

Nachdem ich mir den Inhalt von ./src/moment.js habe, nehme ich meine Worte zurück. Der Inhalt macht aus Sicht des ESM keinen Sinn. Anstatt nützliche Symbole wie Moment , isMoment usw. zu importieren und erneut zu exportieren, wird ein Objekt erstellt und exportiert. Ich glaube, es ist ein Einstiegspunkt für das UMD-Bundle, nicht wahr?

Damit moderne Tools funktionieren, benötigen wir ein geeignetes ESM-Bundle, das alle nützlichen Symbole einzeln exportiert.

Ich habe es geschafft, die benötigten Symbole (ohne das gesamte Bündel von moment.js zu laden) auf diese Weise zu importieren:

// @ts-ignore
import { isMoment, Moment } from 'moment/src/lib/moment/constructor';

Aber ich musste die Tippfehler mit @ts-ignore unterdrücken, was den Import erlaubt, aber alle Typisierungen für die importierten Symbole bricht. Außerdem ist der Pfad hässlich und sollte von den Endbenutzern nicht verwendet werden (da er die Kapselung unterbricht).


Ich habe gerade ein Experiment gemacht. Ich habe eine Datei mit dem Namen moment.esm.js im Stammverzeichnis des Pakets mit folgendem Inhalt erstellt:

export { isMoment, Moment } from './src/lib/moment/constructor';

Und fügte ein module Feld hinzu, um aus dem Paketmanifest darauf zu verweisen.

Dann habe ich es in meine Anwendung importiert:

import { isMoment, Moment } from 'moment';

Es wurde korrekt importiert, wobei die Eingabedeklarationen wie erwartet funktionierten und auch während der Webpack- und Rollup-Builds funktionierte es korrekt. Es wurden nur bestimmte Symbole importiert, ohne ein ganzes Bundle mit allen Gebietsschemas zu laden.

Ich glaube, dies ist ein Weg und kann erweitert werden, um andere Symbole zu exportieren, die in Deklarationen beschrieben sind.

Alle 3 Kommentare

Nachdem ich mir den Inhalt von ./src/moment.js habe, nehme ich meine Worte zurück. Der Inhalt macht aus Sicht des ESM keinen Sinn. Anstatt nützliche Symbole wie Moment , isMoment usw. zu importieren und erneut zu exportieren, wird ein Objekt erstellt und exportiert. Ich glaube, es ist ein Einstiegspunkt für das UMD-Bundle, nicht wahr?

Damit moderne Tools funktionieren, benötigen wir ein geeignetes ESM-Bundle, das alle nützlichen Symbole einzeln exportiert.

Ich habe es geschafft, die benötigten Symbole (ohne das gesamte Bündel von moment.js zu laden) auf diese Weise zu importieren:

// @ts-ignore
import { isMoment, Moment } from 'moment/src/lib/moment/constructor';

Aber ich musste die Tippfehler mit @ts-ignore unterdrücken, was den Import erlaubt, aber alle Typisierungen für die importierten Symbole bricht. Außerdem ist der Pfad hässlich und sollte von den Endbenutzern nicht verwendet werden (da er die Kapselung unterbricht).


Ich habe gerade ein Experiment gemacht. Ich habe eine Datei mit dem Namen moment.esm.js im Stammverzeichnis des Pakets mit folgendem Inhalt erstellt:

export { isMoment, Moment } from './src/lib/moment/constructor';

Und fügte ein module Feld hinzu, um aus dem Paketmanifest darauf zu verweisen.

Dann habe ich es in meine Anwendung importiert:

import { isMoment, Moment } from 'moment';

Es wurde korrekt importiert, wobei die Eingabedeklarationen wie erwartet funktionierten und auch während der Webpack- und Rollup-Builds funktionierte es korrekt. Es wurden nur bestimmte Symbole importiert, ohne ein ganzes Bundle mit allen Gebietsschemas zu laden.

Ich glaube, dies ist ein Weg und kann erweitert werden, um andere Symbole zu exportieren, die in Deklarationen beschrieben sind.

Ich unterstütze dies.

Siehe https://momentjs.com/docs/#/ -project-status/

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen