Babeljs-working-with-babel-and-flow

BabelJS-BabelとFlowの操作

フローは、JavaScriptの静的型チェッカーです。 フローとbabelを使用するには、まずプロジェクトのセットアップを作成します。 プロジェクトのセットアップでbabel 6を使用しました。 babel 7に切り替える場合は、 @ babel/babel-package-name を使用してbabelの必要なパッケージをインストールします。

コマンド

npm init

フローとバベルに必要なパッケージをインストールします-

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

インストール後の最終的なpackage.jsonは次のとおりです。 また、コマンドラインでコードを実行するためのbabelおよびflowコマンドが追加されました。

Execute_Flow_Command.jpg

プロジェクトセットアップ内に .babelrc を作成し、以下に示すようにプリセットを追加します

プリセットの追加

*main.js* ファイルを作成し、フローを使用してJavaScriptコードを記述します-

*main.js*

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

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

babelコマンドを使用して、プリセットを使用してコードをコンパイルします。通常の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);

また、次のようなプリセットの代わりに babel-plugin-transform-flow-strip-types と呼ばれるプラグインを使用することもできます-

*.babelrc* で、次のようにプラグインを追加します-

Babelrcプラグ

*main.js*

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

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

コマンド

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