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-appFlow 是一个静态类型检查器用于帮助写出更少 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-binnpm 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考