问题
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.
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.
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?
回答1:
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.
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.
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:
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"
}
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.
Some other similar projects do support merging of webpack configuration. create-react-app lists some of these alternatives in their README.
回答2:
One option would be to eject the app and customise the configuration. Another option would be to fork react-scripts and build a custom version which will add flow checking to the build process.
来源：https://stackoverflow.com/questions/42818736/add-flow-to-compilation-step-on-create-react-app-project