react源碼解析004 - 關于類型檢查工具flow

huayeluoliuhen 發布于2019-08-20 15:35 / 3184人閱讀

摘要：簡介是推出的類型檢查工具。使得咱們可以指定變量的類型，避免此類錯誤的發生。停用后臺進程，使用以上示例的源碼。配置文件這部分將結合的和官方文檔進行解析。一個文件簡稱，就類似于中的頭文件，是用來定義跨項目可用的全局變量。

Flow 簡介

flow是facebook推出的js類型檢查工具。js是一門弱類型語言，沒有從語言層面去保證變量類型不匹配的基本錯誤。flow使得咱們可以指定變量的類型，避免此類錯誤的發生。

// @flow
function square(n: number): number {
  return n * n;
}

square("2", "2"); // Error!

如圖，使用flow之后，square函數的參數和返回值，都可以指定類型。當你在代碼中寫square("2", "2")的時候，用flow命令一檢查，不需要看業務邏輯，就知道調用的參數有錯誤。

flow入門

新建項目，初始化flow配置

mkdir flow-demo && cd flow-demo && mkdir src && mkdir lib

設置編譯器

yarn add --dev babel-cli babel-preset-flow

此時會生成package.json和yarn.lock文件。yarn是npm的替代品，可以加速npm模塊的安裝，而且能兼容大多數的npm命令。yarn的官網移步這里。

然后在根目錄新建一個.babelrc文件，并配置flow作為presets

{
  "presets": ["flow"]
}

其中"flow"就是指剛才安裝的babel-preset-flow的簡寫，省略了babel-preset-。

此時，你可以用以下命令來做代碼編譯：

yarn run babel src/ -D lib/

當然，也可以將這個命令配置到package.json文件中：

{
  "name": "flow-demo",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -D lib/",
    "prepublish": "yarn run build"
  }
}

設置flow

推薦將flow安裝到當前項目目錄，而不是全局安裝。

yarn add --dev flow-bin

此時

運行yarn run flow init生成配置文件.flowconfig
運行yarn run flow進行代碼檢查

運行上述代碼時會生成一個可復用的后臺進程，以加快后續代碼檢查的速度。

注意上面兩命令都帶上yarn run flow，而不是直接運行flow。區別是yarn run flow調用了本項目中flow-bin的flow命令。

另外，npm上有一個flow，和這里面的flow是完全不相關的，不能混淆。

停用flow后臺進程，使用flow stop

以上示例的源碼。

flow配置文件.flowconfig

這部分將結合react的.flowconfig和flow官方文檔進行解析。

flowconfig大概遵循INI文檔格式。一個.flowconfig文件，可以包含下以五個部分：

[include]
[ignore] 用正則表達式匹配文件或目錄，滿足條件的將被flow忽略；表示項目根目錄
[libs]
[options]
[version]

[ignore]

[ignore]
# Ignore Docs
/docs/.*
/.*/docs/.*

react的ignore部分，都使用了這種絕對路徑的寫法。在配置中使用注釋，可以在行首加#號。

[ignore]
/.*/node_modules/y18n/.*

不清楚為什么react只將node_modules下的y18n忽略，而不是將整個node_modules目錄忽略？（TODO）

[libs]

[libs]
./node_modules/fbjs/flow/lib/dev.js
./flow

dev.js只有一行代碼：declare var __DEV__: boolean;， react跨項目引用一行代碼可見flow項目簡直就是應react而生。

說到[libs]，就必須要說一說flow的一個重要概念：flow library definition。一個flow library definition文件（簡稱libdef），就類似于C++中的頭文件，是用來定義跨項目可用的全局變量。可以定義全局的Function/Class/Variables/Type/Module。詳見flow文檔。

TODO: flow為什么要支持libdef？又是如何使用libdef文件的？

[options]

[options]
# 可選項node|haste，haste已不再被維護，可react還在用
module.system=haste

# 允許在class中使用static關鍵字
esproposal.class_static_fields=enable
# 允許在class中使用instance關鍵字
esproposal.class_instance_fields=enable

# 不允許在class中使用下劃線作為私有函數
munge_underscores=false

# 約束的類型，可以用來代替TODO
suppress_type=$FlowFixMe
# 這個正則是什么含義？TODO
suppress_comment=(.|
)*$FlowFixMe($|[^(]|((>=0.(3[0-3]|[1-2][0-9]|[0-9]).[0-9])? *(site=[a-z,_]*www[a-z,_]*)?))

[version]

[version]
^0.41.0

此version是指flow-bin的版本，可以用yarn run flow version查看。

GPU云服務器云服務器 React 源碼 React源碼靜態類型檢查 js檢查數據類型

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

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

react源碼解析003 - 關于eslint

摘要：簡介是一個被廣泛應用的代碼檢查工具。格式更為靈活，項目用的是后綴，即。是指擴展官方支持的規則是和簡寫，對應模塊。從這個配置中，我們可以看到沒有使用默認的解析器，而是選擇了。比如插件，就自定義了跟語法相關的規則。上面的是的簡稱。 Eslint簡介 eslint是一個被廣泛應用的javascript/jsx代碼檢查工具。 eslint配置文件可以使用js/yaml/json格式，或者在pa...

AlphaGooo 2019-08-20 15:34 評論0 收藏0
react源碼總覽(翻譯)

摘要：每次都信誓旦旦的給自己立下要好好學習源碼的，結果都是因為某個地方卡住了，或是其他原因沒看多少就放棄了。這次又給自己立個堅持看完源碼。我看的源碼版本是。本篇文章是官方文檔里邊的一篇文章的翻譯，原文地址。每次都信誓旦旦的給自己立下要好好學習react源碼的flag，結果都是因為某個地方卡住了，或是其他原因沒看多少就放棄了。這次又給自己立個flag-堅持看完react源碼。為了敦促自己，特...

Tikitoo 2019-08-23 13:58 評論0 收藏0
Flow - JS靜態類型檢查工具

摘要：介紹是個的靜態類型檢查工具，由出品的開源碼項目，問世只有一年多，是個相當年輕的項目。現在，提供了另一個新的選項，它是一種強靜態類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強制...

seanHai 2019-08-20 13:39 評論0 收藏0
webpack實戰

摘要：和類似的預處理器還有等。的用處非常多，包括給自動加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會成為預處理器的最終贏家。 webpack實戰查看所有文檔頁面：全棧開發，獲取更多信息。快馬加鞭，加班加點，終于把這個文檔整理出來了，順便深入地學習一番，鞏固知識，就是太累人，影響睡眠時間和質量。極客就是想要把事情做到極致，開始了就必須到達終點。原文鏈接：webpack實戰，原...

cyrils 2019-08-22 17:32 評論0 收藏0