Importieren Moment-Timzone und Moment-Bereich mit Webpack (Babel/ES6)

Question

Ich benutze Webpack mit Babel Loader. Schreiben nach ES6-Standards. Ich habe sowohl Moment-Zeitzone als auch Moment-Bereich mit Npm installiert.

Beide sind moment.js Plugins, und diese beide sind abhängig von dem Moment Paket, und exportieren Sie einen getrennten Moment Bibliothek. Also, wenn ich

tun

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

dann bekomme ich zwei separate Verweise auf Moment.

Wie kann ich es einrichten, damit ich Moment mit Zeitzone und Bereich Funktionen verwenden könnte?

Danke!

Answer 1

Docs zeigen Commonjs Syntax für diese:

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

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

In ES6:

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

EDIT

Da moment-timezone nicht vorhandenen Import erstreckt, sondern moment selbst erstreckt, was Dies?

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

Answer 2

Ich hatte mir dieses Problem mit verschiedenen Paketen: moment-timezone und frozen-moment. Die Wurzel allen Übels sind zwei moment Abhängigkeiten in verschiedenen Teilen des Baumes. In meinem Fall hatte ich moment direkt unter node_modules und auch innerhalb von frozen-momentnode-modules. Dies bedeutete, dass moment-timezone und frozen-moment verschiedene moment Instanzen verwendeten.

Stellen Sie sicher, dass Sie Versionen von Paketen verwenden, die miteinander kompatibel sind, sodass moment-range keine andere Version von moment abrufen muss. Wenn Sie es haben richtig sollten Sie in der Lage sein, dies zu tun:

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

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

Beachten Sie, dass nur ist zum Testen es richtig eingerichtet, können Sie es wie in glOrtho Antwort benutzen sollte:

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

Answer 3

ich finden Standard-Implementierung der Moment-Bereich ziemlich hässlich, da es nur das Moment-Objekt erweitert, und IMO, das ist irgendwie "hacky".

Dies ist die Art, wie ich es tue:

die oben genannten Lösungen Alle

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

const myRange = new DateRange(x, y); 

Answer 4

nicht für mich arbeiten und ich musste diese greifen:

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

Ein wenig hacky aber Werke .