Eleventy 3.0.0-alpha.17 中使用 I18nPlugin 的正确方式

在 Eleventy 3.0.0-alpha.17 版本中，开发者在使用 I18nPlugin 进行国际化支持时可能会遇到一个常见问题。本文将详细介绍这个问题的原因以及正确的解决方案。

问题现象

当开发者尝试在 Eleventy 配置文件中使用 I18nPlugin 时，可能会遇到以下错误提示：

Class constructor Eleventy cannot be invoked without 'new'

这个错误通常发生在开发者使用以下导入方式时：

import I18nPlugin from '@11ty/eleventy'

问题原因

这个错误的核心原因是导入方式不正确。在 Eleventy 3.0.0-alpha.17 版本中，I18nPlugin 是一个命名导出(named export)，而不是默认导出(default export)。当开发者尝试将其作为默认导入时，JavaScript 引擎无法正确识别这个类。

解决方案

正确的导入方式应该是使用命名导入：

import { I18nPlugin } from '@11ty/eleventy'

完整的配置示例如下：

import { I18nPlugin } from '@11ty/eleventy'

export default async function (eleventyConfig) {
  eleventyConfig.addPlugin(I18nPlugin, {
    defaultLanguage: 'en',
  })
}

技术背景

在 JavaScript/TypeScript 的模块系统中，导出方式主要有两种：

1. 默认导出(default export)：一个模块只能有一个默认导出
2. 命名导出(named export)：一个模块可以有多个命名导出

Eleventy 3.0.0-alpha.17 选择将 I18nPlugin 作为命名导出，这为未来的扩展提供了更好的灵活性。开发者需要注意区分这两种导出方式，特别是在使用现代前端工具链时。

最佳实践

1. 在使用任何 Eleventy 插件前，先查阅官方文档确认正确的导入方式
2. 对于不确定的导入，可以尝试打印模块内容来查看可用导出
3. 保持 Eleventy 版本更新，及时了解 API 变更

通过正确使用命名导入方式，开发者可以顺利地在 Eleventy 项目中实现国际化功能，避免类构造函数调用的错误。