企业官网建设流程全解析

Umi 项目怎么用 moment2dayjs 插件把 moment 替换为 dayjs

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi

如果项目里多处使用moment处理日期，逐个文件手动改成dayjs既低效又容易漏。moment2dayjs插件就是为这个任务准备的：它通过 alias 的方式，在构建层面把项目中所有的moment引用替换为dayjs，业务代码里的import moment from 'moment'一行都不用改。Umi 官方推荐这次替换的原因是 moment 已进入维护状态、包尺寸大且不支持 tree-shaking，而 dayjs 尺寸仅 2k。

插件由@umijs/plugins提供，实现在 packages/plugins/src/moment2dayjs.ts。它做两件事：

1. 通过api.modifyConfig把 alias 中的moment指向dayjs的目录，所有moment导入在构建时就解析到 dayjs；
2. 在生成文件阶段写出一份plugin-moment2dayjs/runtime.tsx运行时文件，按配置对 dayjs 执行dayjs.extend(...)，并把它挂到入口代码最前面，保证插件在应用启动前生效。

插件以配置方式启用（源码中enableBy: api.EnableBy.config），也就是说：不写moment2dayjs配置时它完全不生效。

准备条件

区分两类项目，插件的启用方式不同：

• Umi 项目：默认不附带任何插件，需要安装插件包并在plugins中显式注册 moment2dayjs（见 插件文档）：

  pnpm add -D @umijs/plugins

• Max 项目：moment2dayjs已内置在 Max 预设中（见 packages/max/src/preset.ts 里的require.resolve('@umijs/plugins/dist/moment2dayjs')），无需注册插件，直接写配置即可。

另外，官方文档明确提醒：开启该插件后，需要自行安装dayjs依赖。仓库示例项目（如 examples/max/package.json）声明的 dayjs 版本为^1.11.7，可作参考：

pnpm add dayjs

在 .umirc.ts 中开启插件

配置文件为项目根目录的.umirc.ts（与config/config.ts二选一，.umirc.ts优先级更高）。

Umi 项目需要同时注册插件路径和配置：

// .umirc.ts plugins: [ '@umijs/plugins/dist/moment2dayjs' ], moment2dayjs: { preset: 'antd', plugins: ['duration'], }

Max 项目省略plugins注册，只保留moment2dayjs配置：

// .umirc.ts moment2dayjs: { preset: 'antd', plugins: ['duration'], }

选择 preset 与追加 plugins

moment2dayjs配置有两个键（见 官方文档）：

preset，可选值为antd、antdv3、none。源码中未配置时默认为'antd'。各取值对应的 dayjs 插件：

• antd：isSameOrBefore、isSameOrAfter、advancedFormat、customParseFormat、weekday、weekYear、weekOfYear、isMoment、localeData、localizedFormat
• antdv3：在antd的全部插件之外，额外增加badMutable（面向 antd v3 的兼容）
• none：不扩展任何插件，此时只有plugins里手动列出的会生效

如果项目使用 antd 的日期组件，选antd；如果还在用 antd v3，选antdv3。

plugins，是手动配置的 dayjs 插件名列表，例如['duration']。注意 preset 的插件和plugins配置的插件会合并后统一配置到 dayjs（源码中去重后concat），二者不是互斥关系。

启动并核对生成文件

配置完成后启动开发服务器：

umi dev

编译完成后，替换与插件扩展已经生效，可以从两个位置核对：

1. 生成的运行时文件。插件通过api.writeTmpFile写出plugin-moment2dayjs/runtime.tsx，内容是一个 Mustache 模板渲染出的dayjs.extend(...)调用集合。按 目录结构文档 的说明，dev 时的临时文件在src/.umi目录，build 时在src/.umi-production目录（这两个目录默认已被.gitignore忽略，不要提交）。打开该文件，应能看到与所配 preset/plugins 一致的dayjs.extend列表——配置了preset: 'antd'加plugins: ['duration']时，除duration外还应出现 antd preset 对应的那组插件。
2. moment 的解析目标。源码通过memo.alias.moment = dirname(require.resolve('dayjs/package.json'))设置别名，因此所有moment导入实际指向项目node_modules下的 dayjs。业务代码无需任何改动，原先import moment from 'moment'的写法继续保留。

边界与相关配置

• preset: 'none'时不会自动扩展任何 dayjs 插件，只处理 alias 替换；如果后续用到duration这类 dayjs 原生不支持的 API，必须在plugins中显式列出。
• 使用 antd 插件时注意 antd 文档 中的momentPicker配置项：它控制 antd 的DatePicker、TimePicker、Calendar是否使用 moment 作为日期处理库，默认false。开启moment2dayjs后即使这些组件走 moment 路径，实际也会被 alias 到 dayjs，因此不需要再额外打开momentPicker。
• 插件的替换发生在构建层，运行时的dayjs.extend依赖生成的runtime.tsx，所以不要手动删除或提交src/.umi、src/.umi-production下的临时文件。

替换完成后，产物中的日期库体积从 moment 换为 dayjs，代码层面零改动；后续如有新的 dayjs 插件需求，直接在moment2dayjs.plugins中追加插件名即可。

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi