Create React App 如何添加 Flow 静态类型检查并配置 .flowconfig

Create React App 如何添加 Flow 静态类型检查并配置 .flowconfig

【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app

Flow 是一个静态类型检查器，用于帮助写出更少 bug 的代码。如果你已有一个 Create React App 项目，想为源码引入 Flow 类型检查，近期的 Flow 版本可以直接配合 Create React App 项目工作：构建侧已经认识项目根目录的.flowconfig文件，并会在打包时剥离 Flow 的类型语法，因此你只需要安装flow-bin工具、生成.flowconfig、给需要检查的文件加上标记即可。

本文从已有 Create React App 项目出发，走完安装flow-bin、生成.flowconfig、运行类型检查的完整流程，并给出绝对导入和 Sass/SCSS 两个可选的.flowconfig配置。

准备已有项目

先准备一个 Create React App 项目。文档要求本地开发机 Node >= 14（构建服务器不需要）。如果还没有项目，可以用如下命令创建：

npx create-react-app my-app cd my-app

创建完成后会得到包含package.json和src/App.js等文件的my-app目录，以下步骤都在该目录内执行。

安装 flow-bin 并注册 npm 脚本

在项目目录安装flow-bin：

npm install --save flow-bin

如果你使用 Yarn，则执行yarn add flow-bin。

然后在package.json的scripts部分添加如下脚本：

{ "scripts": { "flow": "flow" } }

生成 .flowconfig 并标记待检查文件

执行初始化命令，在项目根目录生成.flowconfig文件：

npm run flow init

如果使用 Yarn，对应命令是yarn flow init。

接着在需要类型检查的文件中加入// @flow标记，例如加到src/App.js。Flow 只检查带这个标记的文件，未标记的文件不在检查范围内，后续新增文件也要手动补上标记。

Create React App 项目无需额外配置 Babel 就能接受 Flow 语法，是因为构建所用的babel-preset-react-app默认启用flow选项，并启用@babel/plugin-transform-flow-strip-types在构建时剥离 Flow 类型语法，见 create.js；其 README 也说明需要在根目录存在.flowconfig文件，正是上一步生成的内容。

运行类型检查

npm run flow

如果使用 Yarn，则执行yarn flow。该命令会对已标记// @flow的文件执行类型检查并报告类型错误；标记的文件检查不出类型错误时，集成即完成。

如果你希望在输入代码时获得 IDE 内提示，可以安装编辑器扩展，例如 Visual Studio Code 的 Flow Language Support 扩展，或使用基于 Language Server Protocol 标准的客户端（如 vim LSP）。这一步是可选的，不影响命令行检查。

配置绝对导入（可选）

如果项目启用了绝对导入——即在项目根目录通过jsconfig.json或tsconfig.json把baseUrl配置为src，从而可以写import Button from 'components/Button'——需要让 Flow 感知这一映射。在.flowconfig的[options]部分添加下面一行：

[options] + module.name_mapper='^\([^\.].*\)$' -> '<PROJECT_ROOT>/src/\1'

该行按原文粘贴即可，其中<PROJECT_ROOT>是 Flow 自身识别的特殊变量，指向项目根目录，不需要替换。绝对导入本身的配置方法见 importing-a-component。

配置 Sass/SCSS 识别（可选）

如果项目使用 Sass/SCSS 样式文件，需要在.flowconfig中覆盖module.file_ext设置让 Flow 认识.sass、.scss文件，同时保留.js、.jsx、.mjs、.json的默认扩展名设置：

[options] module.file_ext=.js module.file_ext=.jsx module.file_ext=.mjs module.file_ext=.json module.file_ext=.sass module.file_ext=.scss

相关说明见 adding-a-sass-stylesheet。

边界与限制

• Flow 只检查带// @flow标记的文件，新增文件需补上标记后再次运行npm run flow才会被检查。
• 开发模式下代理 API 请求所用的代理文件只支持 Node 的 JavaScript 语法，不支持 Flow、ES Modules 等语法特性，编写该文件时不要使用 Flow 语法，见 proxying-api-requests-in-development。
• 本文流程基于项目文档 adding-flow，其中的外部链接（Flow 官网、IDE 扩展仓库）请以官方渠道为准。

【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app