如何为已弹出的create-react-app添加Flowtype并解决相关异常？

首先明确一点：官方针对未eject的CRA项目的Flow指南，并不完全适用于已经eject的项目。因为eject后，项目的webpack、babel等核心配置完全由你掌控，CRA原本封装好的Flow集成逻辑（比如自动启动Flow检查、热重载适配）都失效了，所以你确实需要手动调整配置来解决遇到的两个问题。

一、修复webpack-dev-server自动重载失效问题 #

自动重载失效的核心原因是：eject后的webpack默认配置没有正确识别Flow相关文件的变更，或者babel处理Flow代码时破坏了webpack的热重载依赖追踪。可以按以下步骤排查修复：

• 检查babel-loader配置：确保已经安装并配置了@babel/preset-flow
  1. 先安装依赖：yarn add @babel/preset-flow --dev
  2. 在项目根目录的babel.config.js或者webpack配置里的babel-loader选项中，把@babel/preset-flow加入presets列表：

     // 示例：webpack.config.js中的babel-loader配置
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: [
                 // 保留原来的react-app预设或其他你在用的presets
                 'react-app',
                 '@babel/preset-flow'
               ]
             }
           }
         }
       ]
     }
     

• 确认webpack的watch配置：确保webpack的watchOptions没有忽略.js/.jsx文件（默认不会，但可以检查一下）：

  // webpack.config.js
  watchOptions: {
    ignored: /node_modules/,
    // 确保没有排除.js/.jsx
  }
  

• 清除缓存重启服务：有时候缓存会导致热重载异常，运行yarn cache clean后再重启yarn start试试。

二、让Flow输出类型检查提示 #

eject后CRA原本集成的“启动dev server时自动运行Flow检查”的逻辑被移除了，所以需要手动配置触发Flow检查的方式：

方式1：通过npm/yarn脚本手动触发 #

1. 确保已经安装flow-bin：yarn add flow-bin --dev
2. 在package.json的scripts中添加：

   "scripts": {
     "flow": "flow",
     "flow:watch": "flow watch"
   }
   

   之后你可以运行yarn flow手动触发一次全量检查，或者yarn flow:watch让Flow实时监听文件变化并输出提示。

方式2：集成到webpack构建流程中 #

如果想在webpack构建/热重载时自动输出Flow检查结果，可以使用flow-webpack-plugin：

1. 安装插件：yarn add flow-webpack-plugin --dev
2. 在webpack.config.js中引入并配置：

   const FlowWebpackPlugin = require('flow-webpack-plugin');
   
   module.exports = {
     // ...其他webpack配置
     plugins: [
       // ...已有的插件（比如HtmlWebpackPlugin等）
       new FlowWebpackPlugin({
         verbose: true, // 开启详细输出
         failOnError: false, // 设置为true会让构建在Flow报错时失败，根据需求调整
         flowPath: require.resolve('flow-bin') // 指定本地flow-bin路径
       })
     ]
   }
   

   这样每次webpack构建或文件热重载时，都会自动运行Flow检查并在控制台输出结果。

方式3：编辑器实时提示 #

更高效的方式是在编辑器中集成Flow（比如VSCode安装Flow Language Support插件），这样在编写代码时就能实时看到类型错误提示，不需要依赖webpack或命令行输出。

最后还要确认你的.flowconfig配置正确：运行yarn flow init可以生成默认配置，确保它包含了你需要检查的目录（比如src/），没有错误忽略需要检查的文件。

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