Question

本指南有助于解释什么是 ES 模块以及如何使 Nuxt 应用程序（或上游库）与 ESM 兼容。

本篇背景

Nuxt 3（和 Bridge）使用原生 ES 模块。

CommonJS Modules

如果遇到这些错误，几乎可以肯定是上游库的问题。 他们需要修复他们的库 以支持由 Node.js 导入。

转译库

好消息是修复 ESM 兼容性问题相对简单。 有两个主要选项：

1. 您可以将 ESM 文件重命名为以 .mjs 结尾。
   这是推荐的最简单的方法。 您可能需要解决库的依赖项问题，可能还需要解决构建系统的问题，但在大多数情况下，这应该可以解决问题。 还建议将 CJS 文件重命名为以.cjs结尾，以获得最大的明确性。
2. 您可以选择将整个图书馆设为 ESM-only。
   这意味着在您的 package.json 中设置 type: 'module' 并确保您构建的库使用 ESM 语法。 但是，您可能会遇到依赖项问题 - 这种方法意味着您的库 只能 在 ESM 上下文中使用。

迁移

从 CJS 到 ESM 的第一步是更新任何对 require 的使用，改为使用 import：

CJS

module.exports = ...
exports.hello = ...

ESM

export default ...
export const hello = ...

CJS

const myLib = require('my-lib')

ESM

import myLib from 'my-lib'
// or
const myLib = await import('my-lib').then(lib => lib.default || lib)

在 ESM 模块中，与 CJS 不同，require、require.resolve、__filename 和 __dirname 全局变量不可用 并且应该替换为 import() 和 import.meta.filename。

CJS

import { join } from 'path'
const newDir = join(__dirname, 'new-dir')

ESM

import { fileURLToPath } from 'node:url'
const newDir = fileURLToPath(new URL('./new-dir', import.meta.url))

CJS

const someFile = require.resolve('./lib/foo.js')

ESM

import { resolvePath } from 'mlly'
const someFile = await resolvePath('my-lib', { url: import.meta.url })

最佳实践

• 更喜欢命名导出而不是默认导出。 这有助于减少 CJS 冲突。 （参见 默认导出 部分）
• 尽可能避免依赖 Node.js 内置插件和 CommonJS 或 Node.js-only 依赖项，以使您的库可在浏览器和 Edge Workers 中使用，而无需 Nitro polyfill。
• 使用带有条件导出的新“导出”字段。 （阅读更多）。

json

{
  "exports": {
    ".": {
      "import": "./dist/mymodule.mjs"
    }
  }
}