Javascript 使用 webpack (Babel/ES6) 导入 moment-timzone 和 moment-range
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30620684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importing moment-timzone and moment-range with webpack (Babel/ES6)
提问by Olav Kokovkin
I'm using Webpack with Babel loader. Writing by ES6 standards. I have installed both moment-timezone and moment-range with npm.
我正在使用 Webpack 和 Babel 加载器。按照 ES6 标准编写。我已经使用 npm 安装了 moment-timezone 和 moment-range。
Both of these are moment.js plugins, and both of these depend on the momentpackage, and export a separate momentlibrary. So when I do
这两个都是moment.js插件，都依赖于moment包，并导出一个单独的moment库。所以当我做
import moment from 'moment-timezone';
import moment2 from 'moment-range';
then I get two separate references to moment.
然后我得到两个对moment 的单独引用。
How can I set it up so I could use momentwith timezone and range functions?
如何设置它以便我可以使用带有时区和范围函数的时刻？
Thanks!
谢谢！
回答by glortho
Docsshow CommonJS syntax for this:
文档为此显示了 CommonJS 语法：
var moment = require('moment');
require('moment-range');
require('moment-timezone');
// moment() now has both range and timezone plugin features
In ES6:
在 ES6 中：
import moment from 'moment';
import 'moment-range';
import 'moment-timezone';
EDIT
编辑
Since moment-timezonedoes not extend existing import but does extend momentitself, what about this?
既然moment-timezone不扩展现有的导入但会扩展moment自己，那么这个呢？
import moment from 'moment-timezone';
import 'moment-range';
回答by manutenfruits
I had myself this problem with different packages: moment-timezoneand frozen-moment. The root of all evil is having two momentdependencies in different parts of the tree. In my case, I had momentright under node_modulesand also inside of frozen-moment's node-modules. This meant that moment-timezoneand frozen-momentwere using different momentinstances.
我在使用不同的包时遇到了这个问题：moment-timezone和frozen-moment. 万恶之源是moment在树的不同部分有两个依赖关系。就我而言，我在's 的moment正下方node_modules和内部都有。这意味着和正在使用不同的实例。frozen-momentnode-modulesmoment-timezonefrozen-momentmoment
Check that you are using versions of packages that are compatible with each other so that moment-rangedoesn't need to fetch a different version of moment. When you have it correctly you should be able to do this:
检查您使用的软件包版本是否相互兼容，以便moment-range不需要获取不同版本的moment. 当你正确地拥有它时，你应该能够做到这一点：
import moment from 'moment';
import momentTimezone from 'moment-timezone';
import momentRange from 'moment-range';
console.log(moment === momentTimezone === momentRange); // logs 'true'
Keep in mind that's only for testing it's properly setup, you should use it like in glortho's answer:
请记住，这仅用于测试它是否正确设置，您应该像 glortho 的答案一样使用它：
import moment from 'moment';
import 'moment-timezone';
import 'moment-range';
回答by Ishmeet Singh
All the above solutions did not work for me and I had to resort to this:
以上所有解决方案对我都不起作用，我不得不求助于这个：
import moment from 'moment';
window.moment = moment;
import {extendMoment} from 'moment-range';
extendMoment(window.moment);
A little hacky but works.
有点hacky但有效。
回答by Carlos Delgado
I managed to import moment-timezoneand moment-rangewith this code:
我设法导入moment-timezone并moment-range使用此代码：
import Moment from 'moment-timezone';
import momentRange from 'moment-range';
const moment = momentRange.extendMoment(Moment);
回答by José Mussa
I find the default implementation of moment-range pretty ugly, since it just extends the moment object, and IMO that's kinda "hacky".
我发现 moment-range 的默认实现非常难看，因为它只是扩展了 moment 对象，而 IMO 有点“hacky”。
This is the way I'm doing it:
这是我这样做的方式：
import { default as DateRange } from 'moment-range';
const myRange = new DateRange(x, y);
回答by Patrick
My project uses webpack with ES6 (same as OP I think), with React. I need functionality from moment timezone. After adding both momentand moment-timezonenpm dependencies, this import statement works:
我的项目使用带有 ES6 的 webpack（我认为与 OP 相同）和 React。我需要时刻时区的功能。添加moment和moment-timezonenpm 依赖项后，此导入语句有效：
import moment from 'moment-timezone';
That allows me to make calls like moment.tz.guess();
这让我可以拨打电话 moment.tz.guess();
What really threw me off though- just adding that import doesn't make momentavailable in my browser's dev console. Going through the comments in https://github.com/moment/moment/issues/2608, someone mentioned this snippet which makes momentavailable in the dev console:
真正让我失望的是 - 仅添加该导入并不能moment在我的浏览器的开发控制台中使用。浏览https://github.com/moment/moment/issues/2608 中的评论，有人提到了这个moment在开发控制台中可用的代码片段：
window.moment = moment;
回答by keith
This worked for me
这对我有用
import * as moment from 'moment-timezone'
import * as momentRange from 'moment-range'
