成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react源碼解析004 - 關(guān)于類型檢查工具flow

huayeluoliuhen / 3190人閱讀

摘要：簡(jiǎn)介是推出的類型檢查工具。使得咱們可以指定變量的類型，避免此類錯(cuò)誤的發(fā)生。停用后臺(tái)進(jìn)程，使用以上示例的源碼。配置文件這部分將結(jié)合的和官方文檔進(jìn)行解析。一個(gè)文件簡(jiǎn)稱，就類似于中的頭文件，是用來(lái)定義跨項(xiàng)目可用的全局變量。

Flow 簡(jiǎn)介

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

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

square("2", "2"); // Error!
如圖，使用flow之后，square函數(shù)的參數(shù)和返回值，都可以指定類型。當(dāng)你在代碼中寫(xiě)square("2", "2")的時(shí)候，用flow命令一檢查，不需要看業(yè)務(wù)邏輯，就知道調(diào)用的參數(shù)有錯(cuò)誤。
flow入門(mén)

新建項(xiàng)目，初始化flow配置

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

設(shè)置編譯器

yarn add --dev babel-cli babel-preset-flow
此時(shí)會(huì)生成package.json和yarn.lock文件。yarn是npm的替代品，可以加速npm模塊的安裝，而且能兼容大多數(shù)的npm命令。yarn的官網(wǎng)移步這里。

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

{
  "presets": ["flow"]
}
其中"flow"就是指剛才安裝的babel-preset-flow的簡(jiǎn)寫(xiě)，省略了babel-preset-。

此時(shí)，你可以用以下命令來(lái)做代碼編譯：

yarn run babel src/ -D lib/

當(dāng)然，也可以將這個(gè)命令配置到package.json文件中：

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

設(shè)置flow

推薦將flow安裝到當(dāng)前項(xiàng)目目錄，而不是全局安裝。

yarn add --dev flow-bin
此時(shí)

運(yùn)行yarn run flow init生成配置文件.flowconfig
運(yùn)行yarn run flow進(jìn)行代碼檢查

運(yùn)行上述代碼時(shí)會(huì)生成一個(gè)可復(fù)用的后臺(tái)進(jìn)程，以加快后續(xù)代碼檢查的速度。


注意上面兩命令都帶上yarn run flow，而不是直接運(yùn)行flow。區(qū)別是yarn run flow調(diào)用了本項(xiàng)目中flow-bin的flow命令。


另外，npm上有一個(gè)flow，和這里面的flow是完全不相關(guān)的，不能混淆。

停用flow后臺(tái)進(jìn)程，使用flow stop

以上示例的源碼。

flow配置文件.flowconfig

這部分將結(jié)合react的.flowconfig和flow官方文檔進(jìn)行解析。

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

[include]
[ignore] 用正則表達(dá)式匹配文件或目錄，滿足條件的將被flow忽略；表示項(xiàng)目根目錄
[libs]
[options]
[version]
[ignore] 
[ignore]
# Ignore Docs
/docs/.*
/.*/docs/.*
react的ignore部分，都使用了這種絕對(duì)路徑的寫(xiě)法。在配置中使用注釋，可以在行首加#號(hào)。
[ignore]
/.*/node_modules/y18n/.*
不清楚為什么react只將node_modules下的y18n忽略，而不是將整個(gè)node_modules目錄忽略？（TODO）
[libs] 
[libs]
./node_modules/fbjs/flow/lib/dev.js
./flow
dev.js只有一行代碼：declare var __DEV__: boolean;， react跨項(xiàng)目引用一行代碼可見(jiàn)flow項(xiàng)目簡(jiǎn)直就是應(yīng)react而生。

說(shuō)到[libs]，就必須要說(shuō)一說(shuō)flow的一個(gè)重要概念：flow library definition。一個(gè)flow library definition文件（簡(jiǎn)稱libdef），就類似于C++中的頭文件，是用來(lái)定義跨項(xiàng)目可用的全局變量。可以定義全局的Function/Class/Variables/Type/Module。詳見(jiàn)flow文檔。

TODO: flow為什么要支持libdef？又是如何使用libdef文件的？
[options] 
[options]
# 可選項(xiàng)node|haste，haste已不再被維護(hù)，可react還在用
module.system=haste

# 允許在class中使用static關(guān)鍵字
esproposal.class_static_fields=enable
# 允許在class中使用instance關(guān)鍵字
esproposal.class_instance_fields=enable

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

# 約束的類型，可以用來(lái)代替TODO
suppress_type=$FlowFixMe
# 這個(gè)正則是什么含義？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查看。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82358.html

相關(guān)文章

  • react源碼解析003 - 關(guān)于eslint

    摘要：簡(jiǎn)介是一個(gè)被廣泛應(yīng)用的代碼檢查工具。格式更為靈活，項(xiàng)目用的是后綴，即。是指擴(kuò)展官方支持的規(guī)則是和簡(jiǎn)寫(xiě)，對(duì)應(yīng)模塊。從這個(gè)配置中，我們可以看到?jīng)]有使用默認(rèn)的解析器，而是選擇了。比如插件，就自定義了跟語(yǔ)法相關(guān)的規(guī)則。上面的是的簡(jiǎn)稱。 Eslint簡(jiǎn)介 eslint是一個(gè)被廣泛應(yīng)用的javascript/jsx代碼檢查工具。 eslint配置文件可以使用js/yaml/json格式，或者在pa...

    AlphaGooo 評(píng)論0 收藏0

  • react源碼總覽(翻譯)

    摘要：每次都信誓旦旦的給自己立下要好好學(xué)習(xí)源碼的，結(jié)果都是因?yàn)槟硞€(gè)地方卡住了，或是其他原因沒(méi)看多少就放棄了。這次又給自己立個(gè)堅(jiān)持看完源碼。我看的源碼版本是。本篇文章是官方文檔里邊的一篇文章的翻譯，原文地址。 每次都信誓旦旦的給自己立下要好好學(xué)習(xí)react源碼的flag，結(jié)果都是因?yàn)槟硞€(gè)地方卡住了，或是其他原因沒(méi)看多少就放棄了。這次又給自己立個(gè)flag-堅(jiān)持看完react源碼。為了敦促自己，特...

    Tikitoo 評(píng)論0 收藏0

  • Flow - JS靜態(tài)類型檢查工具

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

    seanHai 評(píng)論0 收藏0

  • webpack實(shí)戰(zhàn)

    摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動(dòng)加前綴使用下一代語(yǔ)法等，目前越來(lái)越多的人開(kāi)始用它，它很可能會(huì)成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁(yè)面：全棧開(kāi)發(fā)，獲取更多信息?？祚R加鞭，加班加點(diǎn)，終于把這個(gè)文檔整理出來(lái)了，順便深入地學(xué)習(xí)一番，鞏固知識(shí)，就是太累人，影響睡眠時(shí)間和質(zhì)量。極客就是想要把事情做到極致，開(kāi)始了就必須到達(dá)終點(diǎn)。 原文鏈接：webpack實(shí)戰(zhàn)，原...

    cyrils 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<