BabelJS - Trabalhando com Babel e Flow

Flow é um verificador de tipo estático para JavaScript. Para trabalhar com flow e babel, vamos primeiro criar uma configuração de projeto. Usamos o babel 6 na configuração do projeto. Caso você queira mudar para o babel 7, instale os pacotes necessários do babel usando@babel/babel-package-name.

comando

npm init

Instale os pacotes necessários para flow e babel -

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

Aqui está o package.json final após a instalação. Também foi adicionado o comando babel e flow para executar o código na linha de comando.

Crio .babelrc dentro da configuração do projeto e adicionar predefinições como mostrado abaixo

Criar uma main.js arquivo e escreva seu código JavaScript usando o fluxo -

main.js

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

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

Use o comando babel para compilar o código usando 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);

Também podemos usar um plugin chamado babel-plugin-transform-flow-strip-types em vez de predefinições da seguinte forma -

No .babelrc, adicione o plugin da seguinte forma -

main.js

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

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

comando

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