- 2018-06-26创建
flow 安装
npm install flow-bin --save-dev
安装完成后在package.json中加入下面的脚本：
"scripts": {
"flow":"flow check"
}
同时还要安装babel编译器，将flow的类型检查代码从代码中剥离，转变成正常的js代码
npm install babel-cli babel-preset-flow --save-dev
在babel配置文件.babelrc中加入
{
// "presets": ["flow"]
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2",
"flow"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
}
flow 配置
新建 .flowconfig 文件:
[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
[options]
module.file_ext=.vue
module.file_ext=.js
监测运行
example
新建一个文件 abc.js
// @flow
let a:number = '3';
// @flow 或者 /* @flow */ 告诉flow检查这个文件
运行 npm run flow 执行类型检查
在vue单文件组件使用flow需要额外配置
- 1、在.flowconfig文件的[options]中配置.vue文件扩展名
module.file_ext=.vue
- 2、在.vue文件中需注释掉template script styled标签
/* @flow
<template>
<div>
</div>
</template>
*/
// <script>
let a:string = 2;
console.log(a);
export default {
data(){
return {
}
}
}
// </script>
/*
<style scoped>
</style>
*/
注意：
1、 在注释template和style时使用 /**/ 注释，在template和style内部不能再使用 /* */ 这种注释，这个不是flow不识别，本来就不应改 /**/中嵌套 /**/ ,应该在 /**/ 中采用 // 注释风格
2、如果不想在.vue中使用注释的方法，可以在ide中安装flow，但是不能使用npm run flow来检查了。
