- BabelJs Tutorial
- BabelJs - Home
- BabelJs - Overview
- BabelJs - Environment Setup
- BabelJs - CLI
- BabelJs - ES6 Code Execution
- BabelJs - Project setup using Babel 6
- BabelJs - Project Setup Using Babel 7
- Transpile ES6 features to ES5
- Transpile ES6 Modules to ES5
- Transpile ES7 features to ES5
- Transpile ES8 features to ES5
- BabelJs - Babel Plugins
- BabelJs - Babel Polyfill
- BabelJs - Babel CLI
- BabelJs - Babel Presets
- Working with Babel and Webpack
- Working with Babel and JSX
- Working with Babel and Flow
- Working with BabelJS and Gulp
- BabelJs - Examples
- BabelJs Useful Resources
- BabelJs - Quick Guide
- BabelJs - Useful Resources
- BabelJs - Discussion
BabelJS - Working with Babel and Flow
Flow is a static type checker for JavaScript. To work with flow and babel, we will first create a project setup. We have used babel 6 in the project setup. In case you want to switch to babel 7, install the required packages of babel using @babel/babel-package-name.
command
npm init
Install the required packages for flow and babel −
npm install --save-dev babel-core babel-cli babel-preset-flow flow-bin babel-plugin-transform-flow-strip-types
Here is the final package.json after installation. Also added babel and flow command to execute the code in command line.
Create .babelrc inside the project setup and add presets as shown below
Create a main.js file and write your JavaScript code using flow −
main.js
/* @flow */ function concat(a: string, b: string) { return a + b; } let a = concat("A", "B"); console.log(a);
Use babel command to compile the code using presets: flow to normal javascript
npx babel main.js --out-file main_flow.js
main_flow.js
function concat(a, b) { return a + b; } let a = concat("A", "B"); console.log(a);
We can also make use of plugin called babel-plugin-transform-flow-strip-types instead of presets as follows −
In .babelrc, add the plugin as follows −
main.js
/* @flow */ function concat(a: string, b: string) { return a + b; } let a = concat("A", "B"); console.log(a);
command
npx babel main.js --out-file main_flow.js
main_flow.js
function concat(a, b) { return a + b; } let a = concat("A", "B"); console.log(a);
To Continue Learning Please Login
Login with Google