vue2.0项目配置flow类型检查
在vue2.0
的项目中加入flow
类型检查。当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts
(typescript
)这种强类型的语言而言,后期维护会越来越困难。为了解决这个问题,决定使用flow
加入类型检查。
一、flow了解
flow
是fackbook公布的javascript静态类型检查器。 可以检查js中一些bug,eg:自动类型转换中出现的问题。flow官网
引用flow官网的介绍
flow is a static type checker for javascript
flow初体验
// @flow
let a:number = 2;
function foo(b:tring):boolean{
return false;
}
使用bebel转换后
let a = 2;
function foo(b){
return false;
}
从上面代码可以看出,使用flow后的代码更清晰明了。虽然使用注释也可以实现,但使用注释太繁琐,而且不直观。
二、flow的安装
flow可以直接通过npm或者yarn安装。官网推荐安装方式
这里以npm为例
npm install --save-dev flow-bin
安装完成后在package.json中加入下面的脚本
"scripts": {
"flow":"flow check"
}
同时还要安装babel编译器,将flow的类型检查代码从代码中剥离,转变成正常的js代码
npm install --save-dev babel-cli babel-preset-flow
在babel配置文件.babelrc中加入
{
"presets": ["flow"]
}
三、flow使用
配置flow
- 1、
npm run flow init
生成flow配置文件.flowconfig 官网配置传送门
我的配置文件
[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
[options]
module.file_ext=.vue
module.file_ext=.js
- 2、新建一个文件index.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
来检查了。
webstorm中配置flow
配置webstorm,使其支持flow语法。官网ide配置
总结一下为3点:
- 1、安装node包
- 2、全局安装flow
- 3、在框架设置中选择JavaScript flow
以上是我在vue2.0项目安装flow的全部过程。
参考文章: