在vue2.0的項(xiàng)目中加入flow類(lèi)型檢查。當(dāng)前項(xiàng)目是用js寫(xiě)的，當(dāng)項(xiàng)目越來(lái)越大，由于js弱類(lèi)型的特性，相比ts(typescript)這種強(qiáng)類(lèi)型的語(yǔ)言而言，后期維護(hù)會(huì)越來(lái)越困難。為了解決這個(gè)問(wèn)題，決定使用flow 加入類(lèi)型檢查。
一、flow了解
flow是fackbook公布的javascript靜態(tài)類(lèi)型檢查器。 可以檢查js中一些bug，eg：自動(dòng)類(lèi)型轉(zhuǎn)換中出現(xiàn)的問(wè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可以直接通過(guò)npm或者yarn安裝。官網(wǎng)推薦安裝方式
這里以npm為例
npm install --save-dev flow-bin
安裝完成后在package.json中加入下面的腳本
"scripts": {
"flow":"flow check"
}
同時(shí)還要安裝babel編譯器，將flow的類(lèi)型檢查代碼從代碼中剝離，轉(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)配置傳送門(mén)
我的配置文件
[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
[options]
module.file_ext=.vue
module.file_ext=.js
- 2、新建一個(gè)文件index.js
// @flow
let a:number = '3';
// @flow或者 /* @flow */告訴flow檢查這個(gè)文件
輸入npm run flow 執(zhí)行類(lèi)型檢查
注：在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時(shí)使用/**/注釋?zhuān)趖emplate和style內(nèi)部不能再使用 /* */這種注釋?zhuān)@個(gè)不是flow不識(shí)別，本來(lái)就不應(yīng)改/**/中嵌套/**/,應(yīng)該在/**/中采用 // 注釋風(fēng)格
2、如果不想在.vue中使用注釋的方法，可以在ide中安裝flow，但是不能使用npm run flow來(lái)檢查了。
webstorm中配置flow
配置webstorm，使其支持flow語(yǔ)法。官網(wǎng)ide配置
總結(jié)一下為3點(diǎn)：
- 1、安裝node包
- 2、全局安裝flow
- 3、在框架設(shè)置中選擇JavaScript flow
以上是我在vue2.0項(xiàng)目安裝flow的全部過(guò)程。
參考文章：
