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 命令使用预设编译代码：流至普通 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);