react源码剖析004关于范例搜检东西flow

Flow 简介

flow是facebook推出的js范例搜检东西。js是一门弱范例言语，没有从言语层面去保证变量范例不婚配的基础毛病。flow使得我们能够指定变量的范例，防止此类毛病的发作。

// @flow
function square(n: number): number {
return n * n;
}
square("2", "2"); // Error!

如图，运用flow以后，square函数的参数和返回值，都能够指定范例。当你在代码中写square(&＃8216;2&＃8217;, &＃8216;2&＃8217;)的时刻，用flow敕令一搜检，不需要看营业逻辑，就晓得挪用的参数有毛病。

flow入门

1. 新建项目，初始化flow设置

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

2. 设置编译器

   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"
}
}

3. 设置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=\\(.\\|\n\\)*\\$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检察。