web-dev-qa-db-fra.com

Importer un moment et un intervalle de temps avec un pack Web (Babel/ES6)

J'utilise Webpack avec le chargeur Babel. Rédaction selon les normes ES6. J'ai installé moment-timezone et moment-range avec npm.

Les deux sont des plugins moment.js, qui dépendent du package moment et exportent une bibliothèque séparée moment. Alors quand je fais

import moment from 'moment-timezone';
import moment2 from 'moment-range';

alors je reçois deux références séparées à moment.

Comment puis-je le configurer pour pouvoir utiliser moment avec les fonctions de fuseau horaire et de plage?

Merci!

javascriptmomentjsecmascript-6webpack
16
Olav Kokovkin

Docs montre la syntaxe CommonJS pour ceci:

var moment = require('moment');
require('moment-range');
require('moment-timezone');

// moment() now has both range and timezone plugin features

En ES6:

import moment from 'moment';
import 'moment-range';
import 'moment-timezone';

MODIFIER

Puisque moment-timezone n’étend pas l’importation existante, mais moment lui-même, qu’en est-il?

import moment from 'moment-timezone';
import 'moment-range';
29
glortho

J'ai moi-même eu ce problème avec différents paquets: moment-timezone et frozen-moment. La racine de tout mal a deux dépendances moment dans différentes parties de l’arbre. Dans mon cas, j'avais moment droit sous node_modules et aussi à l'intérieur de frozen-moment's node-modules. Cela signifiait que moment-timezone et frozen-moment utilisaient différentes instances moment.

Vérifiez que vous utilisez des versions de packages compatibles les unes avec les autres afin que moment-range n'ait pas besoin d'extraire une version différente de moment. Lorsque vous l'avez correctement, vous devriez pouvoir faire ceci:

import moment from 'moment';
import momentTimezone from 'moment-timezone';
import momentRange from 'moment-range';

console.log(moment === momentTimezone === momentRange); // logs 'true'

N'oubliez pas que c'est uniquement pour tester sa configuration, vous devriez l'utiliser comme dans la réponse de glortho:

import moment from 'moment';
import 'moment-timezone';
import 'moment-range';
8
manutenfruits

Toutes les solutions ci-dessus ne fonctionnaient pas pour moi et j'ai dû recourir à ceci:

import moment from 'moment';
window.moment = moment;
import {extendMoment} from 'moment-range';
extendMoment(window.moment);

Un petit hacky mais ça marche.

3
Ishmeet Singh

Je trouve l’implémentation par défaut de la plage de moments assez moche, puisqu’elle ne fait que prolonger l’objet de moment, et l’OMI est un peu "hacky". 

Voici comment je le fais:

import { default as DateRange } from 'moment-range';

const myRange = new DateRange(x, y);
1
José Mussa

J'ai réussi à importer moment-timezone et moment-range avec ce code:

import Moment from 'moment-timezone';
import momentRange from 'moment-range';

const moment = momentRange.extendMoment(Moment);
0
Carlos Delgado

Mon projet utilise webpack avec ES6 (identique à OP, je pense), avec React. J'ai besoin de fonctionnalités à partir du fuseau horaire. Après avoir ajouté les dépendances moment et moment-timezone npm, cette instruction d'importation fonctionne comme suit:

import moment from 'moment-timezone';

Cela me permet de faire des appels comme moment.tz.guess();

Ce qui m'a vraiment choqué, c'est que le fait d'ajouter que l'importation ne rend pas moment disponible dans la console de développement de mon navigateur. En parcourant les commentaires dans https://github.com/moment/moment/issues/2608 , quelqu'un a mentionné cet extrait qui rend moment disponible dans la console de développement:

window.moment = moment;
0
Patrick