在vue2.0的項(xiàng)目中加入flow類型檢查。當(dāng)前項(xiàng)目是用js寫的，當(dāng)項(xiàng)目越來越大，由于js弱類型的特性，相比ts(typescript)這種強(qiáng)類型的語言而言，后期維護(hù)會越來越困難。為了解決這個問題，決定使用flow 加入類型檢查。
一、flow了解
flow是fackbook公布的javascript靜態(tài)類型檢查器。 可以檢查js中一些bug，eg：自動類型轉(zhuǎn)換中出現(xiàn)的問題。flow官網(wǎng)
引用flow官網(wǎng)的介紹
flow is a static type checker for javascript
flow初體驗(yàn)
// @flow
let a:number = 2;
function foo(b:tring):boolean{
return false;
}
使用bebel轉(zhuǎn)換后
let a = 2;
function foo(b){
return false;
}
從上面代碼可以看出，使用flow后的代碼更清晰明了。雖然使用注釋也可以實(shí)現(xiàn)，但使用注釋太繁瑣，而且不直觀。
二、flow的安裝
flow可以直接通過npm或者yarn安裝。官網(wǎng)推薦安裝方式
這里以npm為例
npm install --save-dev flow-bin
安裝完成后在package.json中加入下面的腳本
"scripts": {
"flow":"flow check"
}
同時還要安裝babel編譯器，將flow的類型檢查代碼從代碼中剝離，轉(zhuǎn)變成正常的js代碼
npm install --save-dev babel-cli babel-preset-flow
在babel配置文件.babelrc中加入
{
"presets": ["flow"]
}
三、flow使用
配置flow
- 1、
npm run flow init生成flow配置文件.flowconfig 官網(wǎng)配置傳送門
我的配置文件
[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 執(zhí)行類型檢查
注：在vue單文件組件使用flow需要額外配置
- 1、在.flowconfig文件的[options]中配置.vue文件擴(kuò)展名
module.file_ext=.vue
- 2、在.vue文件中需注釋掉template script styled標(biāo)簽
參考連接：
/* @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內(nèi)部不能再使用 /* */這種注釋，這個不是flow不識別，本來就不應(yīng)改/**/中嵌套/**/,應(yīng)該在/**/中采用 // 注釋風(fēng)格
2、如果不想在.vue中使用注釋的方法，可以在ide中安裝flow，但是不能使用npm run flow來檢查了。
webstorm中配置flow
配置webstorm，使其支持flow語法。官網(wǎng)ide配置
總結(jié)一下為3點(diǎn)：
- 1、安裝node包
- 2、全局安裝flow
- 3、在框架設(shè)置中選擇JavaScript flow
以上是我在vue2.0項(xiàng)目安裝flow的全部過程。
參考文章：
