Vite 6.1.x 中动态导入JSON文件的语法变更解析

在Vite 6.1.x版本中，开发者发现了一个关于动态导入JSON文件时语法变更的问题。这个问题涉及到JavaScript模块系统中一个相对较新的特性——导入属性(import attributes)的语法规范变化。

问题现象

在Vite 6.0.1版本中，当开发者使用动态导入JSON文件时，代码会被编译为使用with关键字的语法：

const outputData = await import(outputFilePath, { with: { type: 'json' } });

然而在升级到Vite 6.1.x后，同样的代码会被编译为使用assert关键字的语法：

const outputData = await import(outputFilePath, { assert: { type: 'json' } });

这种变化导致了运行时错误，因为Node.js的最新版本(如v23.6.0)期望的是with语法而非assert语法。

技术背景

导入属性是JavaScript模块系统的一个特性，用于在导入模块时提供额外的元数据。对于JSON文件的导入，需要明确指定type: 'json'属性，以告知运行时系统如何处理该文件。

在标准演进过程中，这个特性的语法经历了从assert到with的变化。MDN文档目前采用的是with语法，这也是为什么开发者会期望使用这种形式。

解决方案

这个问题实际上源于Rollup(作为Vite的底层打包工具)的一个变更。从Rollup 3.29.0开始，它开始正确处理output.importAttributesKey配置项，而不再忽略这个配置。

要解决这个问题，开发者需要在Vite配置中明确指定使用with语法：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        importAttributesKey: 'with'
      }
    }
  }
})

兼容性考虑

值得注意的是，不同版本的Node.js和浏览器对这个特性的支持程度不同。开发者需要根据目标运行环境选择合适的语法形式：

1. 较新的Node.js版本(如v23+)和现代浏览器支持with语法
2. 一些旧版本可能只支持assert语法
3. 某些过渡时期的版本可能两者都支持

最佳实践建议

1. 明确指定目标运行环境：在项目配置中清楚定义支持的Node.js版本或浏览器版本范围
2. 保持依赖更新：定期更新Vite和相关工具链以获取最新的标准支持
3. 测试验证：在重要版本升级后，进行全面测试以确保所有功能按预期工作
4. 关注标准演进：JavaScript模块系统仍在快速发展，保持对最新标准的关注

总结

Vite 6.1.x中出现的这个问题实际上是底层工具链对标准实现更加规范化的结果。虽然这带来了短暂的兼容性问题，但从长远来看，这种变化有助于开发者编写更符合标准的代码。通过适当配置，开发者可以确保项目在各种环境中都能正常工作。

对于正在使用动态导入JSON文件功能的开发者，建议按照上述解决方案更新项目配置，并在升级前充分测试以确保兼容性。