环境配置（npm + babel）
- 安装 flow
npm install --save-dev flow-bin
- 安装完成后在package.json中加入下面的脚本
"scripts": {
"flow": "flow"
}
- 同时还要安装babel编译器，将flow的类型检查代码从代码中剥离，转变成正常的js代码
npm install --save-dev \
babel-cli \
babel-preset-flow \
babel-plugin-transform-class-properties \
babel-plugin-syntax-flow \
babel-plugin-transform-flow-strip-types
- 在babel配置文件.babelrc中加入
{
"presets": [
"flow"
],
"plugins": [
"babel-plugin-transform-class-properties",
"babel-plugin-syntax-flow",
"babel-plugin-transform-flow-strip-types"
]
}
使用 flow
- 生成flow配置文件.flowconfig
npm run flow init
- 在 .flowconfig 中加入一些配置，因为 flow 默认不识别 .vue
[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
[options]
module.file_ext=.vue
module.file_ext=.js
module.file_ext=.jsx
在vue 组件中使用
- 在vue中，有 template、style、script，flow 不识别，所以需要如下处理
/* @flow
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="hello">
<input v-model="userVal" @input="onChangeValue" />
</div>
</template>
*/
//<script>
export default {
name: 'hello',
data () {
return {
userVal: '',
value: ''
}
},
methods: {
onChangeValue (event: Object) {
let val = this.userVal
this.value = this.fnPipe(val);
return this.value
},
fnPipe (val: string): number {
return Number(val)
},
}
}
//</script>
在webpack 中使用 flow 检查
- 安装一个 flow 的 webpack 插件
npm install --save-dev flow-webpack-plugin
- 配置到 webpack
// 默认情况下，是调用的 flow status。但是我在vue中使用，报错有点看不懂。
// 所以我是配置为使用 flow check
var FlowWebpackPlugin = require('flow-webpack-plugin');
plugins: [
new FlowWebpackPlugin({
flowArgs: ['check']
})
]
- 最后，运行 npm run dev 就可以边改边看到 flow 的类型校验信息了
