摘要:简介是推出的类型检查工具。使得咱们可以指定变量的类型,避免此类错误的发生。停用后台进程,使用以上示例的源码。配置文件这部分将结合的和官方文档进行解析。一个文件简称,就类似于中的头文件,是用来定义跨项目可用的全局变量。
Flow 简介
flow是facebook推出的js类型检查工具。js是一门弱类型语言,没有从语言层面去保证变量类型不匹配的基本错误。flow使得咱们可以指定变量的类型,避免此类错误的发生。
// @flow function square(n: number): number { return n * n; } square("2", "2"); // Error!
flow入门如图,使用flow之后,square函数的参数和返回值,都可以指定类型。当你在代码中写square("2", "2")的时候,用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忽略;[ignore]表示项目根目录 [libs] [options] [version]
[ignore] # Ignore Docs/docs/.* /.*/docs/.*
react的ignore部分,都使用了
这种绝对路径的写法。在配置中使用注释,可以在行首加#号。
[ignore]/.*/node_modules/y18n/.*
[libs]不清楚为什么react只将node_modules下的y18n忽略,而不是将整个node_modules目录忽略?(TODO)
[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文档。
[options]TODO: flow为什么要支持libdef?又是如何使用libdef文件的?
[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查看。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82358.html
摘要:简介是一个被广泛应用的代码检查工具。格式更为灵活,项目用的是后缀,即。是指扩展官方支持的规则是和简写,对应模块。从这个配置中,我们可以看到没有使用默认的解析器,而是选择了。比如插件,就自定义了跟语法相关的规则。上面的是的简称。 Eslint简介 eslint是一个被广泛应用的javascript/jsx代码检查工具。 eslint配置文件可以使用js/yaml/json格式,或者在pa...
摘要:每次都信誓旦旦的给自己立下要好好学习源码的,结果都是因为某个地方卡住了,或是其他原因没看多少就放弃了。这次又给自己立个坚持看完源码。我看的源码版本是。本篇文章是官方文档里边的一篇文章的翻译,原文地址。 每次都信誓旦旦的给自己立下要好好学习react源码的flag,结果都是因为某个地方卡住了,或是其他原因没看多少就放弃了。这次又给自己立个flag-坚持看完react源码。为了敦促自己,特...
摘要:介绍是个的静态类型检查工具,由出品的开源码项目,问世只有一年多,是个相当年轻的项目。现在,提供了另一个新的选项,它是一种强静态类型的辅助检查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目标是提供一些Flow工具的介绍与使用建议。Flow本质上也只是个检查工具,它并不会自动修正代码中的错误,也不会强制...
阅读 2555·2021-09-30 10:00
阅读 3491·2021-09-22 10:54
阅读 6212·2021-09-07 10:28
阅读 2943·2019-08-29 13:53
阅读 742·2019-08-29 12:42
阅读 958·2019-08-26 13:51
阅读 1258·2019-08-26 13:32
阅读 3021·2019-08-26 10:39