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忽略；<PROJECT_ROOT>表示项目根目录
[libs]
[options]
[version]
[ignore]
[ignore]
# Ignore Docs
<PROJECT_ROOT>/docs/.*
<PROJECT_ROOT>/.*/docs/.*
react的ignore部分，都使用了<PROJECT_ROOT>这种绝对路径的写法。在配置中使用注释，可以在行首加#号。
[ignore]
<PROJECT_ROOT>/.*/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查看。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
