将流添加到create-react-app项目的编译步骤 [英] Add flow to compilation step on create-react-app project

问题描述

我正在使用create-react-app开发一个项目，并希望将Flow添加到我的流程中. 官方文档解释了如何做到这一点，它相对简单明了，但按照他们的指示，它会将其与应用程序自行执行的内置linting/building/compilation一起添加.

I'm working on a project with create-react-app and would like to add Flow to my process. The official documentation explains how to do this and it's relatively straightforward, but following their instructions it adds it alongside the built in linting/building/compilation that the app does on its own.

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

Based on my understanding, any time I save or make a change to my application code, ESLint is running a style check on my code, Babel is transpiling my ES6 to ES5 JavaScript, and my JSX is being transpiled into JS. I would simply like to add Flow typechecking to that process.

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

How can I configure create-react-app to add Flow compilation to its standard build process so that I don't have to run it separately from the command line?

推荐答案

尽管create-react-app确实暴露了一些挂钩，但它们

While create-react-app does expose some hooks, they've repeatedly refused requests to allow users to customize/override/merge webpack configuration. In this sense, the core of the "standard build" is largely non-customizable.

因此，我认为没有一种方法可以在不弹出react-scripts的情况下将流插件真正引入webpack.

As such, I don't think there is a way to actually bring a flow plugin into webpack without ejecting or hacking at react-scripts.

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

That said, if you're primarily looking for immediate feedback as you code, you can probably get this from your IDE, without involving create-react-app's build. For example, VSCode with a Flow extension can give you this type of development experience. As you make changes, you don't have to run anything at the command line to have Flow errors flagged:

要在命令行中进行构建(例如在CI环境中)，您可以执行以下操作:

For building at the command line (e.g. in a CI environment), you could do something like:

"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错误而失败.

This is admittedly still running Flow separately at the command line, but at least it ensures Flow will run, and the build will fail on any Flow errors, even if you only run npm run build or yarn build.

其他一些类似项目 do 支持合并webpack配置. create-react-app 在其自述文件中列出了一些替代方法.

Some other similar projects do support merging of webpack configuration. create-react-app lists some of these alternatives in their README.

这篇关于将流添加到create-react-app项目的编译步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！