vue2.0項目配置flow類型檢查

時間 2019-11-09

標籤 vue2.0 vue 項目配置 flow 類型檢查简体版

原文原文鏈接

在vue2.0的項目中加入flow類型檢查。當前項目是用js寫的，當項目愈來愈大，因爲js弱類型的特性，相比ts(typescript)這種強類型的語言而言，後期維護會愈來愈困難。爲了解決這個問題，決定使用flow 加入類型檢查。javascript

1、flow瞭解

flow是fackbook公佈的javascript靜態類型檢查器。能夠檢查js中一些bug，eg：自動類型轉換中出現的問題。flow官網vue

引用flow官網的介紹java

flow is a static type checker for javascriptnode

flow初體驗webpack

// @flow
let a:number = 2;
function foo(b:tring):boolean{
    return false;
}

使用bebel轉換後git

let a = 2;
function foo(b){
    return false;
}

從上面代碼能夠看出，使用flow後的代碼更清晰明瞭。雖然使用註釋也能夠實現，但使用註釋太繁瑣，並且不直觀。github

2、flow的安裝

flow能夠直接經過npm或者yarn安裝。官網推薦安裝方式 web

這裏以npm爲例typescript

npm install --save-dev flow-binnpm

安裝完成後在package.json中加入下面的腳本

"scripts": {
    "flow":"flow check"
  }

同時還要安裝babel編譯器，將flow的類型檢查代碼從代碼中剝離，轉變成正常的js代碼

npm install --save-dev babel-cli babel-preset-flow

在babel配置文件.babelrc中加入

{
  "presets": ["flow"]
}

3、flow使用

配置flow

一、npm run flow init生成flow配置文件.flowconfig 官網配置傳送門

個人配置文件

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue 
module.file_ext=.js

二、新建一個文件index.js

// @flow 
let a:number = '3';

// @flow或者 /* @flow */告訴flow檢查這個文件
輸入npm run flow 執行類型檢查

注：在vue單文件組件使用flow須要額外配置

一、在.flowconfig文件的[options]中配置.vue文件擴展名

module.file_ext=.vue

二、在.vue文件中需註釋掉template script styled標籤
參考鏈接：
- How to get Flow to properly work with Vue 2 (webpack)?
- Support HTML files

/* @flow
<template>
  <div>
  </div>
</template>
*/
// <script>
  let a:string = 2;
  console.log(a);
  export  default {
    data(){
      return {
       
      }
    }
  }
// </script>
/*
<style scoped>
</style>
*/

注意：
一、在註釋template和style時使用/**/註釋，在template和style內部不能再使用 /* */這種註釋，這個不是flow不識別，原本就不該改/**/中嵌套/**/,應該在/**/中採用 // 註釋風格
二、若是不想在.vue中使用註釋的方法，能夠在ide中安裝flow，可是不能使用npm run flow來檢查了。