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

【问题标题】：Importing moment-timzone and moment-range with webpack (Babel/ES6)使用 webpack (Babel/ES6) 导入 moment-timzone 和 moment-range
【发布时间】：2015-08-17 16:44:56
【问题描述】：

我正在使用带有 Babel 加载器的 Webpack。按 ES6 标准编写。我已经用 npm 安装了 moment-timezone 和 moment-range。

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

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

然后我得到两个对 moment 的单独引用。

如何设置它以便我可以将 moment 与时区和范围函数一起使用？

谢谢！

【问题讨论】：

标签： javascript momentjs ecmascript-6 webpack

【解决方案1】：

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 没有扩展现有的导入，而是扩展了moment 本身，那么这个呢？

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

【讨论】：

我不知道你的答案是否真的解决了问题，但无论哪种方式，它都可以完美地写入 ES6 导入。
感谢@loganfsmyth - 已修复。
遗憾的是，在这种情况下它不起作用。导入“时刻-时区”；不会修改先前导入的“时刻”。但是导入'moment-range'；做。所以问题似乎出在“moment-timezone”包上。我会给你一个赞成票，但不检查“正确的答案”
不，对不起。我尝试了所有的组合。它必须按照您最初建议的方式完成（感谢您，不知道导入的语法），但它不起作用。如果我只导入“时刻”，“时刻范围”只会以某种方式扩展时刻。不过这很奇怪。它们都依赖于相同版本的“moment”，我什至在 package.json 中定义了“peerDependencies”：{“moment”：“2.10.3”}。所以我知道我为“时区”和“范围”获得了相同的“时刻”库

【解决方案2】：

我在使用不同的软件包时遇到了这个问题：moment-timezone 和 frozen-moment。万恶之源是在树的不同部分有两个moment 依赖项。在我的例子中，我在node_modules 的下方有moment，也在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';

【讨论】：

我无法使用 moment@2.20.1 导入 moment-timezone@0.5.14。但是，将时刻更改为 2.18.1 为我修复了它。我使用了推荐的语法： import moment from 'moment';导入“时刻-时区”；导入“时刻范围”；

【解决方案3】：

我发现 moment-range 的默认实现非常丑陋，因为它只是扩展了 moment 对象，而且 IMO 有点“hacky”。

这就是我的做法：

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

const myRange = new DateRange(x, y);

【讨论】：

【解决方案4】：

上述所有解决方案都对我不起作用，我不得不求助于这个：

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

有点 hacky 但很有效。

【讨论】：

【解决方案5】：

我设法使用此代码导入 moment-timezone 和 moment-range：

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

const moment = momentRange.extendMoment(Moment);

【讨论】：

【解决方案6】：

我的项目使用带有 ES6 的 webpack（我认为与 OP 相同）和 React。我需要时刻时区的功能。添加 moment 和 moment-timezone npm 依赖项后，此导入语句有效：

import moment from 'moment-timezone';

这让我可以拨打moment.tz.guess();之类的电话

真正让我失望的是——仅仅添加导入并不能使moment 在我的浏览器的开发控制台中可用。通过https://github.com/moment/moment/issues/2608 中的cmets，有人提到了这个sn-p，它使moment 在开发控制台中可用：

window.moment = moment;

【讨论】：

【解决方案7】：

这对我有用

import * as moment from 'moment-timezone'
import * as momentRange from 'moment-range'

【讨论】：