BabelJS - Bekerja dengan Babel dan Flow
Flow adalah pemeriksa tipe statis untuk JavaScript. Untuk bekerja dengan flow dan babel, pertama-tama kita akan membuat pengaturan proyek. Kami telah menggunakan babel 6 dalam penyiapan proyek. Jika Anda ingin beralih ke babel 7, instal paket babel yang diperlukan menggunakan@babel/babel-package-name.
perintah
npm init
Instal paket yang diperlukan untuk flow dan babel -
npm install --save-dev babel-core babel-cli babel-preset-flow flow-bin babel-plugin-transform-flow-strip-types
Ini adalah package.json terakhir setelah instalasi. Ditambahkan juga babel dan perintah aliran untuk mengeksekusi kode pada baris perintah.

Membuat .babelrc di dalam pengaturan proyek dan tambahkan preset seperti yang ditunjukkan di bawah ini

Membuat main.js file dan tulis kode JavaScript Anda menggunakan flow -
main.js
/* @flow */
function concat(a: string, b: string) {
return a + b;
}
let a = concat("A", "B");
console.log(a);
Gunakan perintah babel untuk mengkompilasi kode menggunakan preset: 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);
Kita juga bisa menggunakan plugin bernama babel-plugin-transform-flow-strip-types alih-alih preset sebagai berikut -
Di .babelrc, tambahkan plugin sebagai berikut -

main.js
/* @flow */
function concat(a: string, b: string) {
return a + b;
}
let a = concat("A", "B");
console.log(a);
perintah
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);