BabelJS - Trabajar con Babel y Flow

Flow es un verificador de tipo estático para JavaScript. Para trabajar con flow y babel, primero crearemos una configuración de proyecto. Hemos utilizado babel 6 en la configuración del proyecto. En caso de que desee cambiar a babel 7, instale los paquetes necesarios de babel usando@babel/babel-package-name.

mando

npm init

Instale los paquetes necesarios para flow y babel -

npm install --save-dev babel-core babel-cli babel-preset-flow flow-bin babel-plugin-transform-flow-strip-types

Aquí está el package.json final después de la instalación. También se agregaron comandos de flujo y babel para ejecutar el código en la línea de comandos.

Crear .babelrc dentro de la configuración del proyecto y agregue ajustes preestablecidos como se muestra a continuación

Crear un main.js file y escriba su código JavaScript usando flow -

main.js

/* @flow */
function concat(a: string, b: string) {
   return a + b;
}

let a = concat("A", "B");
console.log(a);

Use el comando babel para compilar el código usando ajustes preestablecidos: flujo a javascript normal

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);

También podemos hacer uso de un complemento llamado babel-plugin-transform-flow-strip-types en lugar de preajustes de la siguiente manera:

En .babelrc, agregue el complemento de la siguiente manera:

main.js

/* @flow */
function concat(a: string, b: string) {
   return a + b;
}

let a = concat("A", "B");
console.log(a);

mando

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);