BabelJS - 使用 Babel 和 Flow

Flow 是 JavaScript 的靜態型別檢查器。若要使用 Flow 和 Babel，我們首先要建立一個專案設定。我們在專案設定中使用了 Babel 6。如果你想要切換到 Babel 7，可以使用 **@babel/babel-package-name** 安裝 Babel 所需的各種軟體包。

命令：

npm init

安裝 Flow 和 Babel 所需的軟體包 -

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

以下是安裝後的最終 package.json。還添加了 Babel 和 Flow 命令，以便在命令列中執行程式碼。

在專案設定中建立 **.babelrc** 並新增預設，如下所示

建立一個 **main.js** 檔案並使用 Flow 編寫 JavaScript 程式碼 -

main.js

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

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

使用 Babel 命令編譯程式碼，使用預設：將 Flow 編譯為普通 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** 中，新增外掛如下 -

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