React 项目 - Moment Timezone 没有 Europe/London 的数据

React project - Moment Timezone has no data for Europe/London

我在 React 项目中使用 moment-timezone 并且在使用

安装 moment-timezone 之后
yarn add moment-timezone

我的项目在 package.json 库中有这个条目。在我 运行 使用 node 的 js 文件中分别在本地测试 moment-timezone 之后,一切似乎都准备就绪,可以开始在 React 中使用库了。

顺便说一句,这是我的实验脚本,我在其中创建了一个带有洛杉矶时间的矩对象并将其转换为其他时区:

var moment = require('moment-timezone');
const timeLA = moment().tz("Europe/London").format();
console.log(timeLA);

const sampleMoment = moment('2020-07-06T10:00');

console.log(sampleMoment.tz("Europe/London").format());
console.log(sampleMoment.tz("Europe/Vienna").format());

const sampleMoment2 = moment.tz('2020-07-06 10:00', "America/Los_Angeles");
console.log('2020-07-06T10:00', "where you are", sampleMoment2.tz(moment.tz.guess()).format());
console.log('2020-07-06T10:00', "London", sampleMoment2.tz("Europe/London").format());
console.log('2020-07-06T10:00', "Lisbon", sampleMoment2.tz("Europe/Lisbon").format());

所以我在我的项目中导入了时刻时区:

import moment from "moment-timezone";

并使用这个库编写了一个工厂函数:

function momentFactory(dateExpr, timezone) {
    return timezone ? moment.tz(dateExpr, timezone) : moment(dateExpr);
}

在我的 React 页面重新启动后,我开始看到这些错误(超过 100 个):

Moment Timezone has no data for America/New_York. See http://momentjs.com/timezone/docs/#/data-loading/.

这很奇怪,因为在我之前的实验中,只要导入库,我就会获得所有可能时区的数据。我不知道为什么在纯节点环境中运行良好的东西在浏览器上却不能以同样的方式运行。

作为一种解决方法,我最终在我的函数中加载了时区数据,但我想这是一种 hack:

function momentFactory(dateExpr, timezone) {
    moment.tz.load(require('moment-timezone/data/packed/latest.json'));
    return timezone ? moment.tz(dateExpr, timezone) : moment(dateExpr);
}

在一个由 create-react-app 引导的项目中,有没有办法在没有这种解决方法的情况下正确加载库?

要在 React 中使用 moment.js,您需要使用 react-moment

查看 link 我想这会解决您的问题。 https://www.npmjs.com/package/react-moment

将您的导入语句更改为:

import moment from 'moment-timezone/builds/moment-timezone-with-data';

或者如果您更喜欢截断的较小数据集:

import moment from 'moment-timezone/builds/moment-timezone-with-data-10-year-range';

(您可以使用 builds 目录中的任何数据文件。)

此外,如果您要创建新应用程序并针对现代网络浏览器,请考虑使用 Luxon 而不是 Moment。 Luxon 属于 Moment 系列,但提供不可变 API、现代打包功能,并使用现代浏览器的内置时区数据,而不是要求您在应用程序中分发时区数据。请仅在您已经在遗留应用程序中使用 Moment,或者如果您需要支持旧版 Web 浏览器时才使用它。谢谢