Eleventy项目中JSON导入导致服务模式错误的解决方案

在Eleventy 3.0.0版本中，开发者在使用eleventy --serve命令运行本地服务时，可能会遇到一个与JSON文件导入相关的错误。这个问题主要出现在使用现代JavaScript的JSON导入语法时，导致服务模式下的文件监视功能无法正常工作。

问题现象

当开发者在Eleventy项目中使用如下ES模块导入语法时：

import pkg from '../../package.json' with { type: 'json' };

运行eleventy --serve命令后，控制台会输出以下错误信息：

Unexpected token (8:37)

错误明确指出问题发生在JSON导入语句的with { type: 'json' }部分。虽然错误提示表明这不会影响实际构建过程，但会中断服务模式下的文件监视功能。

问题根源

这个问题的根本原因在于Eleventy的依赖树解析机制。Eleventy使用@11ty/dependency-tree-esm包来分析JavaScript文件的依赖关系，以便在服务模式下监视这些依赖文件的变化。然而，当前版本的依赖解析器尚未完全支持最新的JSON模块导入语法。

解决方案

目前有以下几种可行的解决方案：

1. 禁用JavaScript依赖监视： 在Eleventy配置文件中添加以下代码可以临时解决问题：

   eleventyConfig.setWatchJavaScriptDependencies(false);
   

   这种方法的缺点是会完全禁用对JavaScript依赖的监视功能。

2. 改用传统文件读取方式： 可以使用Node.js的fs模块手动读取JSON文件：

   import { readFileSync } from 'fs';
   const pkg = JSON.parse(readFileSync('../../package.json'));
   

   但这种方法不会自动监视JSON文件的变化。

3. 等待官方修复： 这个问题已被Eleventy团队确认，预计在未来的版本中会得到修复。

最佳实践建议

对于需要立即解决问题的开发者，建议采用以下组合方案：

1. 对于关键的、经常修改的JSON文件，使用fs模块读取
2. 在配置中添加对特定JSON文件的忽略规则：

   eleventyConfig.watchIgnores.add('package.json');
   

3. 保持关注Eleventy的更新，以便在问题修复后及时升级

总结

虽然JSON导入语法在现代JavaScript开发中非常方便，但在Eleventy的服务模式下目前还存在兼容性问题。开发者可以根据项目需求选择最适合的临时解决方案，同时期待官方在未来版本中提供完整的支持。