BabelJS - Travailler avec Babel et Flow

Flow est un vérificateur de type statique pour JavaScript. Pour travailler avec flow et babel, nous allons d'abord créer une configuration de projet. Nous avons utilisé babel 6 dans la configuration du projet. Si vous souhaitez passer à babel 7, installez les packages requis de babel en utilisant@babel/babel-package-name.

commander

npm init

Installez les packages requis pour flow et babel -

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

Voici le package.json final après l'installation. Ajout de la commande babel et flow pour exécuter le code en ligne de commande.

Créer .babelrc dans la configuration du projet et ajoutez des préréglages comme indiqué ci-dessous

Créer un main.js fichier et écrivez votre code JavaScript en utilisant flow -

main.js

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

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

Utilisez la commande babel pour compiler le code à l'aide des préréglages: flux vers le 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);

Nous pouvons également utiliser le plugin appelé babel-plugin-transform-flow-strip-types au lieu de préréglages comme suit -

Dans .babelrc, ajoutez le plugin comme suit -

main.js

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

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

commander

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