# 二、Flow编译
因为flow
的类型注解不是javascript
的标准语法,所以不能直接运行。我们需要将代码转换成浏览器可以执行的原始的JavaScript
语言运行。所以我们可以在完成编码过后,移除掉我们添加的注解。
# 1. 官网提供flow-remove-types
npm flow-remove-types (opens new window)
# npm环境
- 安装
npm i flow-remove-types --dev
1
package.json
中修改配置
# 把src目录下的编译之后转到dist目录下
"scripts": {
"flow": "flow",
"flowRemove": "flow-remove-types src/ -d dist/"
}
1
2
3
4
5
2
3
4
5
- 运行
npm run flowRemove
1
可以看到在dist
目录下有了编译之后的js
文件
# yarn环境
- 安装
yarn add flow-remove-types
1
- 运行
# 第一个是指定目录,-d 之后是输出目录
yarn flow-remove-types src -d dist/
1
2
2
# 2. Babel
# 1) 安装
yarn
环境
# @babel/cli我们可以直接使用babel命令完成编译
# @babel/perset-flow包含了我们转换flow类型检查的插件
yarn add @babel/core @babel/cli @babel/perset-flow
1
2
3
2
3
npm
环境
npm i @babel/core @babel/cli @babel/perset-flow --dev
1
# 2) 添加配置文件
同级目录添加.babelrc
文件,添加配置
{
"presets": ["@babel/preset-flow"]
}
1
2
3
2
3
# 3) 使用
yarn
环境
yarn babel src -d dist
1
npm
环境
在package.json
中添加
"scripts": {
"babel": "babel src/ -d dist/"
}
1
2
3
2
3
运行babel
npm run babel
1