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。它做两件事通过api.modifyConfig把 alias 中的moment指向dayjs的目录所有moment导入在构建时就解析到 dayjs在生成文件阶段写出一份plugin-moment2dayjs/runtime.tsx运行时文件按配置对 dayjs 执行dayjs.extend(...)并把它挂到入口代码最前面保证插件在应用启动前生效。插件以配置方式启用源码中enableBy: api.EnableBy.config也就是说不写moment2dayjs配置时它完全不生效。准备条件区分两类项目插件的启用方式不同Umi 项目默认不附带任何插件需要安装插件包并在plugins中显式注册 moment2dayjs见 插件文档pnpm add -D umijs/pluginsMax 项目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 与追加 pluginsmoment2dayjs配置有两个键见 官方文档preset可选值为antd、antdv3、none。源码中未配置时默认为antd。各取值对应的 dayjs 插件antdisSameOrBefore、isSameOrAfter、advancedFormat、customParseFormat、weekday、weekYear、weekOfYear、isMoment、localeData、localizedFormatantdv3在antd的全部插件之外额外增加badMutable面向 antd v3 的兼容none不扩展任何插件此时只有plugins里手动列出的会生效如果项目使用 antd 的日期组件选antd如果还在用 antd v3选antdv3。plugins是手动配置的 dayjs 插件名列表例如[duration]。注意 preset 的插件和plugins配置的插件会合并后统一配置到 dayjs源码中去重后concat二者不是互斥关系。启动并核对生成文件配置完成后启动开发服务器umi dev编译完成后替换与插件扩展已经生效可以从两个位置核对生成的运行时文件。插件通过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 对应的那组插件。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Umi 项目怎么用 moment2dayjs 插件把 moment 替换为 dayjs
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。它做两件事通过api.modifyConfig把 alias 中的moment指向dayjs的目录所有moment导入在构建时就解析到 dayjs在生成文件阶段写出一份plugin-moment2dayjs/runtime.tsx运行时文件按配置对 dayjs 执行dayjs.extend(...)并把它挂到入口代码最前面保证插件在应用启动前生效。插件以配置方式启用源码中enableBy: api.EnableBy.config也就是说不写moment2dayjs配置时它完全不生效。准备条件区分两类项目插件的启用方式不同Umi 项目默认不附带任何插件需要安装插件包并在plugins中显式注册 moment2dayjs见 插件文档pnpm add -D umijs/pluginsMax 项目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 与追加 pluginsmoment2dayjs配置有两个键见 官方文档preset可选值为antd、antdv3、none。源码中未配置时默认为antd。各取值对应的 dayjs 插件antdisSameOrBefore、isSameOrAfter、advancedFormat、customParseFormat、weekday、weekYear、weekOfYear、isMoment、localeData、localizedFormatantdv3在antd的全部插件之外额外增加badMutable面向 antd v3 的兼容none不扩展任何插件此时只有plugins里手动列出的会生效如果项目使用 antd 的日期组件选antd如果还在用 antd v3选antdv3。plugins是手动配置的 dayjs 插件名列表例如[duration]。注意 preset 的插件和plugins配置的插件会合并后统一配置到 dayjs源码中去重后concat二者不是互斥关系。启动并核对生成文件配置完成后启动开发服务器umi dev编译完成后替换与插件扩展已经生效可以从两个位置核对生成的运行时文件。插件通过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 对应的那组插件。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考