Create React App 使用 Moment.js 时中文等非英文 locale 缺失怎么配置

Create React App 使用 Moment.js 时中文等非英文 locale 缺失怎么配置

【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app

在 Create React App 项目中引入 Moment.js 后，你经常会发现一个现象：默认情况下只有英文 locale 可用，moment.locale('zh-cn')之类的中文设置不生效。这不是项目环境的问题，而是 Create React App 有意为之的构建行为，解法也很直接：在代码里显式导入你需要的 locale 文件即可。

为什么默认只能用英文

Create React App 的官方排查文档 Troubleshooting 在 “Moment.js locales are missing” 一节说明：locale 文件体积较大，而通常你只需要其中一小部分，因此项目默认只保留英文 locale。

这一行为由 webpack 配置实现。webpack.config.js 中注册了一个webpack.IgnorePlugin：

// Moment.js is an extremely popular library that bundles large locale files // by default due to how webpack interprets its code. This is a practical // solution that requires the user to opt into importing specific locales. new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/, }),

这段配置的含义是：凡是moment包内部的./locale模块一律被忽略，不进入 bundle。除非你显式导入某个具体 locale，否则它就不会被打包。

显式导入需要的 locale

前提：项目里已经安装了 moment。安装任意第三方库的方式见 Installing a Dependency，例如：

npm install --save moment

然后在用到 moment 的代码里，显式导入你需要的 locale。官方文档给出的示例（以法语为例）：

import moment from 'moment'; import 'moment/locale/fr';

中文 locale 按同样的方式导入，只是把文件换成中文对应的 locale 名：

import moment from 'moment'; import 'moment/locale/zh-cn';

locale 文件名沿用 Moment.js 自身的 locale 命名（完整列表以 Moment.js 官方提供的所有 locales 为准），导入路径固定为moment/locale/<locale 名>。

多个 locale 之间切换

如果你显式导入了多个 locale，之后可以调用moment.locale()并传入 locale 名来回切换。文档中的示例：

import moment from 'moment'; import 'moment/locale/fr'; import 'moment/locale/es'; // ... moment.locale('fr');

中文场景同理：导入moment/locale/zh-cn之后，调用moment.locale('zh-cn')即可切换到中文。

如何判断配置是否生效

文档给出的判断依据是：

• 修改前：项目中只有英文 locale 可用，非英文 locale 设置无效；
• 修改后：显式导入的 locale 即可使用，moment.locale('zh-cn')传入已导入的 locale 名才能生效。

注意文档明确的一条限制：“This will only work for locales that have been explicitly imported before.”只有事先显式导入过的 locale 才会被打包并可用；没有导入的 locale，即使调用moment.locale()也不会生效。所以如果发现某个 locale 仍不可用，先检查是否漏了import 'moment/locale/<locale 名>'这一行。

相关文档

• 问题现象与修复示例：Moment.js locales are missing
• locale 排除机制的 webpack 配置：webpack.config.js
• 第三方依赖安装方式：Installing a Dependency

补充一点历史背景：CHANGELOG-1.x 中 “Import required locales for Moment.js” 一节说明，从 react-scripts 1.0.0 起 Moment.js locale 就是有意排除、需要显式导入的，因此这是该工具的既定设计，不需要（也无法通过）调整 CRA 配置来“放开”所有 locale——正确做法始终是按需显式导入。

【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app