BabelJS - Lavorare con Babel e Flow

Flow è un controllo di tipo statico per JavaScript. Per lavorare con Flow e Babel, creeremo prima una configurazione del progetto. Abbiamo usato babel 6 nella configurazione del progetto. Nel caso in cui desideri passare a babel 7, installa i pacchetti richiesti di babel usando@babel/babel-package-name.

comando

npm init

Installa i pacchetti richiesti per flow e babel -

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

Ecco il package.json finale dopo l'installazione. Aggiunto anche il comando babel e flow per eseguire il codice nella riga di comando.

Creare .babelrc all'interno della configurazione del progetto e aggiungere i preset come mostrato di seguito

Creare un main.js file e scrivi il tuo codice JavaScript usando il flusso -

main.js

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

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

Usa il comando babel per compilare il codice usando i 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);

Possiamo anche utilizzare il plugin chiamato babel-plugin-transform-flow-strip-types invece dei preset come segue:

Nel .babelrc, aggiungi il plugin come segue:

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