Preact Signals React Transform 插件处理TSX文件的注意事项

Preact Signals 是一个优秀的响应式状态管理库，其React Transform插件能够自动优化组件性能。但在实际使用中，开发者可能会遇到该插件无法正确处理TSX文件的问题。

问题现象

当使用Preact Signals的React Transform插件时，插件会跳过所有TSX文件的转换，日志显示这些文件被标记为hasJSX: false。这意味着插件未能正确识别TSX文件中的JSX语法，导致自动优化失效。

根本原因分析

这个问题通常源于Babel处理管道的配置顺序。关键在于：

1. TypeScript预设(@babel/preset-typescript)默认会移除JSX语法，将其转换为普通的JavaScript函数调用
2. 当JSX被移除后，后续的React Transform插件就无法检测到JSX结构
3. 这一问题不会出现在JS/JSX文件中，因为它们通常由不同的预设处理

解决方案

要解决这个问题，需要确保Babel在处理TSX文件时保留JSX结构。有两种主要方法：

方法一：调整TypeScript配置

在tsconfig.json中设置：

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

这种方法告诉TypeScript编译器保留JSX语法，而不是将其转换为函数调用。

方法二：调整Babel插件顺序

确保React Transform插件在TypeScript处理之前运行：

{
  "plugins": [
    "module:@preact/signals-react-transform",
    "@babel/preset-typescript"
  ]
}

最佳实践建议

1. 对于混合使用JS/TS的项目，建议统一采用方法一的配置
2. 定期检查Babel插件顺序，确保性能优化类插件尽早执行
3. 在复杂项目中，考虑使用/** @useSignals */注释作为临时解决方案
4. 监控构建日志，确保所有预期的组件都得到了优化

技术原理深入

Preact Signals的React Transform插件通过检测JSX结构来实现自动优化。当它发现一个组件包含JSX时，会自动添加必要的性能优化代码。但在TSX文件中，如果JSX过早被转换，插件就无法完成这一工作。

理解这一机制有助于开发者更好地配置构建工具，确保项目获得最佳性能优化。