Rolldown项目中的JSX保留模式支持解析

在构建现代前端库时，开发者经常需要处理JSX语法转换的问题。本文深入探讨了Rolldown构建工具及其Vite插件对JSX保留模式(preserve模式)的支持情况，以及在实际项目中的应用方案。

JSX保留模式的核心价值

JSX保留模式允许构建工具在输出代码时保留原始的JSX语法结构，而不是将其转换为传统的JavaScript函数调用。这种模式对于需要支持SolidJS等特殊框架的库开发者尤为重要，因为：

1. 保持JSX结构可以让框架在运行时进行更高效的渲染
2. 避免不必要的转换步骤，减少构建时间
3. 提供更干净的输出代码，便于调试和维护

Rolldown原生支持情况

Rolldown核心已经完整实现了JSX保留模式功能。开发者可以通过配置rollupOptions.jsx.mode为'preserve'来启用这一特性。测试用例表明，Rolldown能够正确处理JSX保留模式下的代码转换。

Vite集成方案

虽然Rolldown核心支持JSX保留模式，但其Vite插件(rolldown-vite)在默认配置下无法直接使用这一特性。经过技术验证，发现需要解决以下两个关键问题：

1. 禁用不必要的转换插件：需要绕过Vite默认的esbuild转换流程
2. 正确处理模块类型：确保JSX文件被正确识别为JSX模块而非普通JS模块

具体实现方案

基础配置调整

开发者需要在Vite配置中进行以下基础设置：

{
  oxc: {
    jsx: 'preserve'
  },
  build: {
    target: 'esnext',
    lib: {
      entry: './src/mod.tsx'
    }
  }
}

插件层优化

为了确保JSX保留模式正常工作，需要对Vite的构建流程进行精细控制：

1. 禁用vite:esbuild-transpile插件
2. 修改vite:build-import-analysis插件的transform钩子
3. 调整vite:oxc插件的模块类型识别逻辑

完整配置示例

{
  plugins: [
    {
      name: 'jsx-preserve-optimize',
      apply: 'build',
      config() {
        return {
          build: {
            target: 'esnext'
          }
        }
      },
      configResolved(config) {
        const importAnalysis = config.plugins.find(p => p.name === 'vite:build-import-analysis')
        delete importAnalysis?.transform
        
        const oxcPlugin = config.plugins.find(p => p.name === 'vite:oxc')
        const originalTransform = oxcPlugin?.transform
        oxcPlugin.transform = async function(...args) {
          const result = await originalTransform.apply(this, args)
          if(result) {
            result.moduleType = 'jsx'
          }
          return result
        }
      }
    }
  ]
}

技术要点解析

1. 模块类型识别：将模块类型显式设置为'jsx'可以确保后续处理流程正确识别JSX语法
2. 转换流程控制：通过选择性禁用某些插件的transform钩子，可以保留原始JSX结构
3. 构建目标设置：指定esnext目标可以避免不必要的语法降级转换

实际应用建议

对于需要支持SolidJS等框架的库开发者，建议：

1. 明确区分开发模式和生产模式的构建配置
2. 在开发模式下保留完整的JSX转换流程以获得更好的开发体验
3. 在生产构建时启用JSX保留模式以确保框架兼容性
4. 建立完整的类型定义和示例项目，验证库的兼容性

通过合理配置Rolldown和Vite插件，开发者可以构建出既保持良好开发体验又能完美支持特殊框架的前端库。这种方案已经在多个实际项目中得到验证，证明其稳定性和可靠性。