@babel/preset-flow
This preset is recommended if you use Flow, a static type checker for JavaScript code. It includes the following plugins:
Example
In
JavaScript
function foo(one: any, two: number, three?): string {}
Out
JavaScript
function foo(one, two, three) {}
Installation
- npm
- Yarn
- pnpm
npm install --save-dev @babel/preset-flow
yarn add --dev @babel/preset-flow
pnpm add --save-dev @babel/preset-flow
Usage
With a configuration file (Recommended)
babel.config.json
{
"presets": ["@babel/preset-flow"]
}
Via CLI
Shell
babel --presets @babel/preset-flow script.js
Via Node API
JavaScript
require("@babel/core").transformSync("code", {
presets: ["@babel/preset-flow"],
});
Options
all
boolean
, defaults to false
.
Flow will only parse Flow-specific features if a @flow
pragma is present atop the file, or the all option is set inside the .flowconfig
.
If you are using the all
option in your Flow config, be sure to set this option to true
to get matching behavior.
For example, without either of the above set, the following call expression with a type argument:
f<T>(e)
Would get parsed as a nested binary expression:
JavaScript
f < T > e;
allowDeclareFields
boolean
, defaults to false
Added in: v7.9.0
note
This will be enabled by default in Babel 8
When enabled, type-only class fields are only removed if they are prefixed with the declare
modifier:
JavaScript
class A {
declare foo: string; // Removed
bar: string; // Initialized to undefined
}
ignoreExtensions
boolean
, defaults to true
Added in: v7.24.0
When it is set to true
, Babel will apply the flow transform to all extensions. When it is set to false
, Babel will avoid the flow transform for *.tsx
files.
experimental_useHermesParser
boolean
, defaults to false
Added in: v7.24.0
The Hermes team is maintaining an alternative Flow parser for Babel, which is better kept up-to-date with the latest Flow syntax features. You can enable it by setting this option to true
.
warning
The Hermes parser does not currently attach comments to the AST. This can cause problems with transforms that depend on the presence of specific comments.
You can read more about configuring preset options here