Nuxt 3.16.0 构建时 dayjs 函数报错问题解析

问题背景

在 Nuxt.js 3.16.0 版本中，开发者报告了一个关于 dayjs 库的兼容性问题。当使用 dayjs 的 isBetween 方法时，系统会抛出"dayjs(...).isBetween is not a function"的错误。这个问题在之前的 3.15.4 版本中并不存在，表明这是新版本引入的兼容性问题。

问题本质

经过 Nuxt 核心团队成员的调查，发现这个问题源于 Nuxt 3.16.0 中启用的一个新特性：preserveModules 选项。这个选项会影响模块的打包方式，导致 dayjs 插件在某些情况下无法正确加载其扩展方法。

技术细节

preserveModules 是 Rollup 打包工具的一个配置选项，它决定是否保留模块的原始结构而不是将所有代码合并到一个文件中。当这个选项启用时：

1. 模块会保持独立文件形式存在
2. 可能导致某些依赖关系处理方式发生变化
3. 对于像 dayjs 这样依赖插件系统的库，可能会影响其扩展方法的加载

解决方案

目前推荐的解决方案是暂时禁用 preserveModules 选项。可以通过以下配置实现：

export default defineNuxtConfig({
  vite: {
    $server: {
      build: {
        rollupOptions: {
          output: {
            preserveModules: false
          }
        }
      }
    }
  }
})

这个配置会强制 Rollup 使用传统的打包方式，避免模块保留带来的兼容性问题。

最佳实践建议

1. 如果项目必须使用 dayjs 的插件功能，建议暂时采用上述解决方案
2. 关注 Nuxt 官方更新，等待更完善的修复方案
3. 升级 dayjs 到最新版本，确保没有其他兼容性问题
4. 在测试环境中充分验证日期相关功能

总结

Nuxt 3.16.0 引入的打包优化虽然提升了性能，但也带来了与某些库的兼容性问题。开发者在使用新版本时需要注意这类潜在问题，特别是涉及到第三方库扩展功能的情况。通过合理的配置调整，可以平衡性能与兼容性的需求。