您好,登錄后才能下訂單哦!
在vue2.0的項(xiàng)目中加入flow類型檢查。當(dāng)前項(xiàng)目是用js寫的,當(dāng)項(xiàng)目越來越大,由于js弱類型的特性,相比ts(typescript)這種強(qiáng)類型的語言而言,后期維護(hù)會(huì)越來越困難。為了解決這個(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單文件組件
然后,在需要flow進(jìn)行類型檢測的.js文件或.vue文件script標(biāo)簽內(nèi)容最頂部,加上注釋
// @flow
沒有該注釋對(duì)文件將不會(huì)進(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í)可能會(huì)報(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)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。