使用webpack (Babel/ES6)导入moment-timzone和moment-range

Importing moment-timzone and moment-range with webpack (Babel/ES6)

本文关键字：导入 moment-timzone moment-range ES6 webpack Babel 使用      更新时间：2023-09-26

我使用Webpack与Babel加载器。按照ES6标准编写。我用npm安装了moment-timezone和moment-range。

这两个都是moment.js插件，它们都依赖于moment包，并导出一个单独的moment库。所以当我输入

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

则得到对时刻的两个单独引用。

我如何设置它，以便我可以使用时刻与时区和范围函数?

谢谢!

Docs显示CommonJS语法:

var moment = require('moment');
require('moment-range');
require('moment-timezone');
// moment() now has both range and timezone plugin features
在ES6: 

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

编辑

既然moment-timezone没有扩展现有的import，但是扩展了moment本身，那么这个呢?

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

我在不同的软件包中遇到了这个问题:moment-timezone和frozen-moment。祸根是在树的不同部分有两个moment依赖项。在我的例子中，我有moment在node_modules下面，也在frozen-moment的node-modules里面。这意味着moment-timezone和frozen-moment使用了不同的moment实例。

检查您使用的软件包版本是否相互兼容，以便moment-range不需要获取不同版本的moment。当你正确设置它时，你应该可以这样做:

import moment from 'moment';
import momentTimezone from 'moment-timezone';
import momentRange from 'moment-range';
console.log(moment === momentTimezone === momentRange); // logs 'true'

请记住，这只是为了测试它是否正确设置，你应该像在glortho的回答中那样使用它:

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

以上所有的解决方案都不适合我，我不得不求助于这个:

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

我发现moment-range的默认实现非常丑陋，因为它只是扩展了moment对象，在我看来这有点"hacky"。

我是这样做的:

import { default as DateRange } from 'moment-range';
const myRange = new DateRange(x, y);

我用下面的代码导入moment-timezone和moment-range:

import Moment from 'moment-timezone';
import momentRange from 'moment-range';
const moment = momentRange.extendMoment(Moment);

我的项目使用webpack与ES6(相同的OP我认为)，与React。我需要功能从时刻时区。在添加了moment和moment-timezone npm依赖项之后，下面的import语句就可以工作了:

import moment from 'moment-timezone';

允许我调用moment.tz.guess();

真正让我失望的是——仅仅添加导入并不能使moment在我的浏览器的开发控制台上可用。在https://github.com/moment/moment/issues/2608的评论中，有人提到了这个代码片段，它使moment在开发控制台可用:

window.moment = moment;

这对我有用

import * as moment from 'moment-timezone'
import * as momentRange from 'moment-range'
相关文章：