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