在 create-react-app 项目的编译步骤中添加流程答案

【问题标题】：Add flow to compilation step on create-react-app project在 create-react-app 项目的编译步骤中添加流程
【发布时间】：2017-08-06 17:19:21
【问题描述】：

我正在使用 create-react-app 开展一个项目，并希望将 Flow 添加到我的流程中。 official documentation 解释了如何执行此操作，它相对简单，但按照他们的说明，它将它添加到应用程序自己执行的内置 linting/building/compilation 旁边。

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

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

【问题讨论】：

标签： webpack eslint babeljs flowtype create-react-app

【解决方案1】：

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

因此，我认为没有办法在不弹出或入侵react-scripts 的情况下将流插件实际引入 webpack。

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

对于在命令行中构建（例如在 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 将运行，并且构建将在任何 Flow 错误时失败，即使您只运行 npm run build 或 yarn build。

其他一些类似的项目做支持合并 webpack 配置。 create-react-applists some of these alternatives in their README.

【讨论】：

【解决方案2】：

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

【讨论】：