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

Question

我正在使用create-react-app处理项目，并希望将Flow添加到我的流程中。 official documentation解释了如何执行此操作并且它相对简单，但按照其说明将其与应用程序单独执行的内置linting / building / compilation一起添加。

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

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

Answer 1

虽然create-react-app确实暴露了一些钩子，但是他们repeatedly refused请求允许用户自定义/覆盖/合并webpack配置。从这个意义上说，“标准构建”的核心很大程度上是不可定制的。

因此，我认为有一种方法可以在没有弹出或黑客攻击react-scripts的情况下将流插件实际带入webpack。

也就是说，如果您在编写代码时主要是寻求即时反馈，那么您可以从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 lists some of these alternatives in their README。

Answer 2

一个选项是eject应用程序并自定义配置。另一种选择是fork react-scripts并构建一个自定义版本，它将flow检查添加到构建过程。