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

Rocko 發布于2019-08-20 16:01 / 2281人閱讀

摘要：在的項目中加入類型檢查。當前項目是用寫的，當項目越來越大，由于弱類型的特性，相比這種強類型的語言而言，后期維護會越來越困難。為了解決這個問題，決定使用加入類型檢查。一了解是公布的靜態類型檢查器。中配置配置，使其支持語法。

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

一、flow了解

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

引用flow官網的介紹

flow is a static type checker for javascript

flow初體驗

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

使用bebel轉換后

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

從上面代碼可以看出，使用flow后的代碼更清晰明了。雖然使用注釋也可以實現，但使用注釋太繁瑣，而且不直觀。

二、flow的安裝

flow可以直接通過npm或者yarn安裝。官網推薦安裝方式

這里以npm為例

npm install --save-dev flow-bin

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

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

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

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

在babel配置文件.babelrc中加入

{
  "presets": ["flow"]
}

三、flow使用 配置flow

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

我的配置文件

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

[libs]

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

2、新建一個文件index.js

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

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

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

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

module.file_ext=.vue

2、在.vue文件中需注釋掉template script styled標簽
參考連接：

How to get Flow to properly work with Vue 2 (webpack)?

Support HTML files

/* @flow

*/
// 
/*

*/

注意：
1、在注釋template和style時使用/**/注釋，在template和style內部不能再使用 /* */這種注釋，這個不是flow不識別，本來就不應改/**/中嵌套/**/,應該在/**/中采用 // 注釋風格
2、如果不想在.vue中使用注釋的方法，可以在ide中安裝flow，但是不能使用npm run flow來檢查了。

webstorm中配置flow

配置webstorm，使其支持flow語法。官網ide配置

總結一下為3點：

1、安裝node包

2、全局安裝flow

3、在框架設置中選擇JavaScript flow

以上是我在vue2.0項目安裝flow的全部過程。

參考文章：

Flow教程（一） - 簡介和開始

Writing Vue.js Components with Flow

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82657.html

JS 靜態類型檢查工具 Flow

摘要：本文主要介紹了解決作為弱類型語言沒有類型檢查痛點的靜態類型檢查工具，并且介紹了在中使用的方法，最后介紹了一些常用的語法。本文主要介紹了解決JS作為弱類型語言沒有類型檢查痛點的靜態類型檢查工具 Flow ，并且介紹了在WebStorm中使用Flow的方法，最后介紹了一些常用的Flow語法。 1. 簡介 JS作為一種腳本語言是沒有類型檢測的，這個特點有時候用著很方便，但在一個較大的項目中...

CloudDeveloper 2019-08-22 16:17 評論0 收藏0
react源碼解析004 - 關于類型檢查工具flow

摘要：簡介是推出的類型檢查工具。使得咱們可以指定變量的類型，避免此類錯誤的發生。停用后臺進程，使用以上示例的源碼。配置文件這部分將結合的和官方文檔進行解析。一個文件簡稱，就類似于中的頭文件，是用來定義跨項目可用的全局變量。 Flow 簡介 flow是facebook推出的js類型檢查工具。js是一門弱類型語言，沒有從語言層面去保證變量類型不匹配的基本錯誤。flow使得咱們可以指定變量的類型，...

huayeluoliuhen 2019-08-20 15:35 評論0 收藏0
flow從零開始----安裝和配置

摘要：資源官網安裝參考什么是是一個弱類型的解釋性語言，無法在編譯環節進行靜態類型校驗，如果想也具備靜態類型檢查功能。那就得使用到由推出，官網是。資源官網：https://flow.org/ 安裝：https://flow.org/en/docs/inst... 參考：https://www.01hai.com/note/av... https://www.jianshu.com/p...

KoreyLee 2019-08-23 14:32 評論0 收藏0
jslint、flow 與 typescript

摘要：命令行目錄文件運行后將會檢查目錄下的文件，并將有問題的語句打印出來。使用成本中搭配編輯器使用是開發過程中的最佳實踐。是推出的一款靜態類型檢查工具。收益偏高對代碼做了類型檢查，可以避免之類的錯誤。 jslint airbnb-config jslint 的作用是對 js 做語法檢查，他可以使代碼更加規范、清晰，而 airbnb-config 是其中最流行的一套檢查規則。安裝方法 npm...

habren 2019-08-19 18:21 評論0 收藏0