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

flow了解

flow是fackbook公布的javascript靜態(tài)類型檢查器。 可以檢查js中一些bug，eg：自動類型轉(zhuǎn)換中出現(xiàn)的問題。flow官網(wǎng)

首先，安裝flow

npm i flow-bin --save-dev

然后在package.json中添加腳本

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

在項目根目錄下運行命令，生成文件.flowconfig

npm run flow init

打開 .flowconfig 文件，可以看到內(nèi)容大致如下

.*/node_modules/.*
.*/test/.*
.*/build/.*
[include]
[libs]
[lints]
[options]
module.file_ext=.vue 
module.file_ext=.js
[strict]

其中在[ignore]下配置要忽略的文件，在[options]中我們可以添加
module.file_ext=.vue 這樣的配置讓flow檢測vue單文件組件

• [ignore]：Flow 默認檢查項目目錄下所有文件，但是有很多文件必定是我們不想檢查的，就像 node_modules、build 等目錄下的文件，所以我們需要在將這些目錄寫在 ignore 配置下。
• [include]：所謂的項目目錄其實是 .flowconfig 目錄，并不是真正的項目目錄，如果我們在這個項目中的某個目錄下創(chuàng)建一個 .flowconfig，那么 .flowconfig 所在的目錄也會變?yōu)橐粋€ Flow 項目。那么，如果我們想對當前 Flow 項目以外的文件或者目錄進行檢查，需要把它們寫在 include 配置項中。
• [libs]：在項目中，我們可能會用到很多自定義的類型，比如說要記錄對象的結(jié)構(gòu)，它可能在每個文件中都會被運用到，我們將其抽取為全局的類型或數(shù)據(jù)結(jié)構(gòu)，在任何文件都可以使用。為了管理方便，我們將全局類型都定義在一個或多個單純的目錄中統(tǒng)一管理。這里存放的有可能是一個定義好的數(shù)據(jù)結(jié)構(gòu)，存放的也有可能是根據(jù)項目中某個類對應的數(shù)據(jù)類型。我們將這些文件或目錄寫在 libs 配置項中，這個配置對于我們使用 Flow 來說很重要。
• [options]：這里填寫對 Flow 項目的一些配置，配置項以key=value的形式，每行寫一個。所有的配置見官方文檔
• [lints]：官網(wǎng)中沒有提到 lints 相關的配置

然后，在需要flow進行類型檢測的.js文件或.vue文件script標簽內(nèi)容最頂部，加上注釋

// @flow

沒有該注釋對文件將不會進行類型檢測

配置到到這里，我們可以運行 npm run flow 進行代碼到類型檢查，獲取檢查報告。

由于類型注釋不是我們ES規(guī)范的一部分，因此我們需要把使用了flow的代碼轉(zhuǎn)換成正常的js代碼，可以使用babel-preset-flow或babel-plugin-transform-flow-strip-types來移除它。

安裝flow相關的flow插件：
babel-cli: babel-cli腳手架
babel-preset-flow: 用于編譯前去除代碼中的類型聲明
babel-plugin-transform-flow-strip-types 同上，而選一

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

安裝完后，在項目根目錄的.babelrc文件(無則創(chuàng)建)里添加如下內(nèi)容

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2",
  "flow"
 ],
 "plugins": [
  //"babel-plugin-transform-flow-strip-types"
 ]
}

如果想要在代碼中實時看到flow類型檢查的錯誤，需要安裝eslint插件

npm i eslint-plugin-flowtype-errors --save-dev

然后在.eslintrc文件中添加配置：

 {
 plugins: [
  'flowtype-errors'
 ],
 rules: {
  "flowtype-errors/show-errors": 2
 }
}

PS:在vscode中進行類型聲明時可能會報"類型聲明只能在.ts文件中使用"的錯誤，這時候找到setting,搜索javascript.validate,將其禁用即可

參考文章：Writing Vue.js Components with Flow

到此這篇關于Vue項目中使用flow做類型檢測的方法的文章就介紹到這了,更多相關Vue flow 類型檢測內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！ 

最新評論