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

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

// @flow

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

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

由于類型注釋不是我們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

安裝完后，在項目根目錄的.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中進(jìn)行類型聲明時可能會報'類型聲明只能在.ts文件中使用'的錯誤，這時候找到setting,搜索javascript.validate,將其禁用即可

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

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