如何让Vite识别Flow类型？解决开发环境Flow相关报错问题

Vite默认依赖esbuild处理代码，但esbuild不支持Flow语法，以下是几种可行的解决办法：

方法一：通过@vitejs/plugin-react + Babel剥离Flow类型 #

利用Vite的React插件集成Babel，借助babel-plugin-transform-flow-strip-types在构建时移除Flow类型注解：

• 安装依赖：

  npm install --save-dev @vitejs/plugin-react babel-plugin-transform-flow-strip-types
  

• 修改vite.config.js配置：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [
      react({
        babel: {
          plugins: ['transform-flow-strip-types']
        }
      })
    ]
  })
  

方法二：禁用esbuild，完全用Babel处理代码 #

如果项目中Flow代码占比大，或者需要更完整的Flow支持，可以直接让Vite用Babel替代esbuild：

• 安装依赖：

  npm install --save-dev @vitejs/plugin-react @babel/preset-flow
  

• 修改vite.config.js配置：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [
      react({
        babel: {
          presets: ['@babel/preset-flow']
        },
        esbuild: false
      })
    ]
  })
  

  注意：该方案会降低构建速度，因为Babel比esbuild慢，但能完美兼容所有Flow语法。

方法三：使用vite-plugin-flow插件预处理代码 #

这个插件会在Vite处理代码前自动剥离Flow类型，无需额外配置Babel：

• 安装插件：

  npm install --save-dev vite-plugin-flow
  

• 修改vite.config.js配置：

  import { defineConfig } from 'vite'
  import flowPlugin from 'vite-plugin-flow'
  
  export default defineConfig({
    plugins: [flowPlugin()]
  })
  

额外注意事项 #

• 确保项目根目录存在.flowconfig文件，让工具能正确识别Flow语法范围。
• 如果有第三方依赖未剥离Flow类型，需在Vite的optimizeDeps.exclude中排除该依赖，避免构建报错。

内容的提问来源于stack exchange，提问作者Paulprg19