Moment: Ajout de la prise en charge des bundlers compatibles ESM
Bonjour!
Merci pour cette superbe bibliothèque!
Cependant, je pense que le champ "module" dans le manifeste du package ( package.json file) devrait pointer vers le bundle ESM, par exemple ./src/moment.js .
Les bundles qui prennent en charge ESM (Webpack, Rollup et autres) devraient pouvoir trouver le bundle ESM à l'aide du champ module afin d'utiliser des techniques d'optimisation modernes (comme le secouage d'arbres). À l'heure actuelle, le forfait ./moment.js UMD est utilisé à la place.
Cela entraîne le chargement de la bibliothèque entière dans les projets compatibles ESM, même si vous importez un seul symbole à partir de celle-ci.
Par exemple, une importation comme celle-ci:
import { isMoment } from 'moment';
importera tout de la bibliothèque, cependant, une seule fonction a été demandée.
Et vous ne pouvez pas utiliser le import { isMoment } from 'moment/src/moment'; comme solution de contournement dans les projets TypeScript car il cassera les typages.
slavafomin
Tous les 3 commentaires
Après avoir regardé le contenu de ./src/moment.js je reprends mes paroles. Le contenu n'a aucun sens du point de vue ESM. Au lieu d'importer et de réexporter des symboles utiles comme Moment , isMoment , etc., il construit un objet et l'exporte. Je crois que c'est un point d'entrée pour le bundle UMD, n'est-ce pas?
Pour que les outils modernes fonctionnent, nous avons besoin d'un ensemble ESM approprié, qui exportera tous les symboles utiles individuellement.
J'ai réussi à importer les symboles dont j'ai besoin (sans charger tout le paquet de moment.js) de cette façon:
// @ts-ignore
import { isMoment, Moment } from 'moment/src/lib/moment/constructor';
Mais j'ai dû supprimer les erreurs de frappe avec @ts-ignore , ce qui permet l'importation, mais casse toutes les saisies pour les symboles importés. De plus, le chemin est moche et ne devrait pas être utilisé par les utilisateurs finaux (car il rompt l'encapsulation).
Je viens de faire une expérience. J'ai créé un fichier appelé moment.esm.js à la racine du package avec le contenu suivant:
export { isMoment, Moment } from './src/lib/moment/constructor';
Et ajouté un champ module pour le pointer à partir du manifeste du package.
Puis je l'ai importé dans mon application :
import { isMoment, Moment } from 'moment';
Il a été importé correctement avec les déclarations de saisie fonctionnant comme prévu et il a également fonctionné correctement pendant les versions Webpack et Rollup. Seuls les symboles spécifiés ont été importés sans charger un ensemble complet avec tous les paramètres régionaux.
Je pense que c'est une voie à suivre et qu'elle peut être étendue pour exporter d'autres symboles, décrits dans des déclarations.
slavafomin
le 12 nov. 2019
Je soutiens cela.
arswaw
le 11 déc. 2019
Voir https://momentjs.com/docs/#/ -project-status /
marwahaha
le 15 sept. 2020
Questions connexes
Delgan
·
3Commentaires
4rg0n
·
3Commentaires
dbshwang
·
3Commentaires
ninigix
·
3Commentaires
vbullinger
·
3Commentaires
Commentaire le plus utile
Après avoir regardé le contenu de
./src/moment.jsje reprends mes paroles. Le contenu n'a aucun sens du point de vue ESM. Au lieu d'importer et de réexporter des symboles utiles commeMoment,isMoment, etc., il construit un objet et l'exporte. Je crois que c'est un point d'entrée pour le bundle UMD, n'est-ce pas?Pour que les outils modernes fonctionnent, nous avons besoin d'un ensemble ESM approprié, qui exportera tous les symboles utiles individuellement.
J'ai réussi à importer les symboles dont j'ai besoin (sans charger tout le paquet de moment.js) de cette façon:
Mais j'ai dû supprimer les erreurs de frappe avec
@ts-ignore, ce qui permet l'importation, mais casse toutes les saisies pour les symboles importés. De plus, le chemin est moche et ne devrait pas être utilisé par les utilisateurs finaux (car il rompt l'encapsulation).Je viens de faire une expérience. J'ai créé un fichier appelé
moment.esm.jsà la racine du package avec le contenu suivant:Et ajouté un champ
modulepour le pointer à partir du manifeste du package.Puis je l'ai importé dans mon application :
Il a été importé correctement avec les déclarations de saisie fonctionnant comme prévu et il a également fonctionné correctement pendant les versions Webpack et Rollup. Seuls les symboles spécifiés ont été importés sans charger un ensemble complet avec tous les paramètres régionaux.
Je pense que c'est une voie à suivre et qu'elle peut être étendue pour exporter d'autres symboles, décrits dans des déclarations.