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

flow了解

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

首先，安裝flow

npm i flow-bin --save-dev

然后在package.json中添加腳本

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

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

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

// @flow

沒有該注釋對文件將不會進(jìn)行類型檢測

配置到到這里，我們可以運(yùn)行 npm run flow 進(jìn)行代碼到類型檢查，獲取檢查報(bào)告。

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

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

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

安裝完后，在項(xiàng)目根目錄的.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"
 ]
}

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

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

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

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

PS:在vscode中進(jìn)行類型聲明時(shí)可能會報(bào)"類型聲明只能在.ts文件中使用"的錯(cuò)誤，這時(shí)候找到setting,搜索javascript.validate,將其禁用即可

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

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

最新評論