将流添加到create-react-app项目的编译步骤

Question

我正在使用create-react-app开发项目，并希望将Flow添加到我的流程中。 官方文档说明了如何执行此操作，它相对简单明了，但按照他们的说明，它会将其添加到应用程序自行执行的内置整理/构建/编译中。

根据我的理解，每当我保存或更改应用程序代码时，ESLint都会对代码运行样式检查，Babel会将ES6转换为ES5 JavaScript，而JSX则转换为JS。 我只想向该过程添加Flow类型检查。

如何配置create-react-app将Flow编译添加到其标准构建过程中，从而不必从命令行单独运行它？

Answer 1

尽管create-react-app确实暴露了一些挂钩，但它们反复拒绝了允许用户自定义/覆盖/合并Webpack配置的请求。 从这个意义上说，“标准构建”的核心在很大程度上是不可定制的。

因此，我认为没有一种方法可以将流插件真正引入webpack而不弹出或攻击react-scripts 。

就是说，如果您主要是在编写代码时寻求即时反馈，则可以从IDE中获得此反馈，而无需涉及create-react-app的构建。 例如，带有Flow扩展的VSCode可以为您提供这种类型的开发经验。 进行更改时，无需在命令行上运行任何命令即可将Flow错误标记为：

为了在命令行上进行构建（例如在CI环境中），您可以执行以下操作：

"scripts": {
  "start": "react-scripts start",
  "build": "flow && react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "flow": "flow"
}

当然，这仍然可以在命令行上单独运行Flow，但是至少可以确保Flow可以运行，并且即使您仅运行npm run build或yarn build ，构建也会因任何Flow错误而失败。

其他一些类似的项目也支持合并Webpack配置。 create-react-app 在其README文件中列出了其中一些替代方法 。

Answer 2

一种选择是eject应用程序并自定义配置。 另一个选择是派生react-scripts并构建自定义版本，这将在构建过程中添加flow检查。