三、Flow编译

因为flow的类型注解不是javascript的标准语法，所以不能直接运行。我们需要将代码转换成浏览器可以执行的原始的JavaScript语言运行。所以我们可以在完成编码过后，移除掉我们添加的注解。

1. 官网提供flow-remove-types

npm flow-remove-types

npm环境

1. 安装

npm i flow-remove-types --dev

2. package.json中修改配置

# 把src目录下的编译之后转到dist目录下
"scripts": {
    "flow": "flow",
    "flowRemove": "flow-remove-types src/ -d dist/"
}

3. 运行

npm run flowRemove

可以看到在dist目录下有了编译之后的js文件

yarn环境

1. 安装

yarn add flow-remove-types

2. 运行

# 第一个是指定目录，-d 之后是输出目录
yarn flow-remove-types src -d dist/

2. Babel

1) 安装

yarn环境

# @babel/cli我们可以直接使用babel命令完成编译
# @babel/perset-flow包含了我们转换flow类型检查的插件
yarn add @babel/core @babel/cli @babel/perset-flow

npm环境

npm i @babel/core @babel/cli @babel/perset-flow --dev

2) 添加配置文件

同级目录添加.babelrc文件，添加配置

{
  "presets": ["@babel/preset-flow"]
}

3) 使用

yarn环境

yarn babel src -d dist

npm环境

在package.json中添加

"scripts": {
    "babel": "babel src/ -d dist/"
}

运行babel

npm run babel