Babel未正确剥离Flow注解，Webpack构建报错求助

嘿，我之前也碰到过一模一样的问题！结合你描述的场景——React+ES6、Webpack+Babel，加Flow后构建报SyntaxError: Unexpected token, expected ,，大概率是Babel预设的顺序不对或者Flow预设的版本和Babel不匹配，咱们一步步来排查：

1. 先确认Babel版本，装对Flow预设 #

如果你用的是Babel 7+，千万别用旧的babel-preset-flow，得装适配Babel7的@babel/preset-flow：

npm install --save-dev @babel/preset-flow

要是还在Babel 6，那用babel-preset-flow是对的，确保已经安装：

npm install --save-dev babel-preset-flow

2. 调整.babelrc的预设顺序（关键！） #

Babel的预设是从后往前执行的，所以Flow预设必须放在最前面，这样它能先把所有Flow注解剥离干净，再让React、ES6的预设处理剩下的语法。

正确的Babel 7配置示例：

{
  "presets": [
    "@babel/preset-flow",
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

正确的Babel 6配置示例：

{
  "presets": [
    "flow",
    "es2015",
    "react"
  ]
}

3. 检查Webpack的babel-loader配置 #

确保你的Webpack配置里，babel-loader正确处理了.js和.jsx文件，并且排除了node_modules：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

4. 额外小检查 #

• 项目根目录最好有个.flowconfig文件（可以用flow init生成），虽然Babel剥离注解不需要它，但Flow本身做类型检查需要这个文件，避免后续其他问题。
• 如果之前装过冲突的依赖，建议删掉node_modules和package-lock.json（或yarn.lock），重新执行npm install，确保依赖版本完全匹配。

按照这个流程调整后，再跑Webpack构建，应该就能正常剥离Flow注解，不会再报语法错误啦！

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