Flow+Webstorm“无法解析模块”

Question

我有一个现有的项目，我们将 Flow 的类型系统集成到反应端。该项目是基于电子的，因此根据定义，它是一个单一的回购。我们遇到了各种各样的问题来识别导入语句。

node_modules 导入会失败：

import _ from 'lodash'; // Flow: Cannot resolve module lodash

更重要的是，我们想要相对于我们项目的绝对路径：

import {MyComponent} from 'src/component/myComponent'; 
// Flow: Cannot resolve module src...

为此找到解决方案需要花费一些时间，并且某些领域的文档有点缺乏，所以我想列出一个实际可行的编译列表。

Answer 1

TL;DR;

在 webstorm 上设置流，这样它就会给你模块错误

全局设置flow，将webstorm的js设置指向使用flow，指向flow-bin的全局副本（甚至不是exe，只是dir）

将以下选项添加到 .flowconfig：

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

---

完整版

必须完成几个基本步骤才能让流在 webstorm 中运行：

全局安装 flow-bin

多个消息来源声称 flow-bin 在全球范围内运行得更好

全局安装 flow-bin

yarn global add flow-bin
or
npm i -g flow-bin

仔细检查它是否为您提供了当前版本的 flow-bin，这 拒绝在 0.75.0 或更早版本上工作

设置 Webstorm 的流可执行文件

• 在 Webstorm 上：文件 > 设置 > 语言和框架 > Javascript
• 选择 Flow 作为 JavaScript 语言版本
• 查找包管理器（yarn 或 npm）存储全局文件的位置

在 Windows+yarn 上，这是 C:/Users/[您的用户名]/AppData/Local/Yarn/Cache/v1

在 Windows+NPM 上，这是 C:/Users/fish/AppData/Roaming/npm/node_modules

这就是我的流动路径：

C:/Users/[your username]/AppData/Local/Yarn/Cache/v1/npm-flow-bin-[whatever]/ 

• 在 Webstorm 的 JavaScript 设置中，将 Flow 包或可执行文件定位到我们刚刚找到的全局流路径
• 申请，好的

设置 Flow 的 .flowconfig

.flowconfig 设置附注

• 我有一个根 git 项目，它包含 2 个部分、反应和电子。 Flow 根据您放置 .flowconfig 文件的位置执行操作。
• 如果它包含“all=true”，请删除该行并添加 // @Flow 到您希望流检查的文件（否则它将开始索引所有 node_modules

重现我的问题

• 将 .flowconfig 放到你的 react 目录中
• 享受厄运的所有“流程：无法导入模块”波浪线

模块问题的解决方法

这是我当前的 .flowconfig

[ignore]
.*/build/.*

[include]

[libs]

[lints]

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

[strict]

为什么会这样？

告诉名称映射器将以 src/ 开头的模块解析到 src/ 目录，以便项目文件的绝对路径有效：

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

告诉 flow 使用“haste”模块系统：

module.system=haste

急速模块系统步骤很重要，否则它不知道“lodash”是指“./node_modules/lodash”。告诉它使用仓促意味着它会正确找到您的导入语句。 More info on haste available here