react源码解析004 - 关于类型检查工具flow

huayeluoliuhen 发布于2019-08-20 15:35 / 2995人阅读

摘要：简介是推出的类型检查工具。使得咱们可以指定变量的类型，避免此类错误的发生。停用后台进程，使用以上示例的源码。配置文件这部分将结合的和官方文档进行解析。一个文件简称，就类似于中的头文件，是用来定义跨项目可用的全局变量。

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查看。

服务器托管专线服务 React 源码 React源码静态类型检查 js检查数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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