Flow + Webstorm“无法解析模块”

Question

我有一个现有项目，我们将Flow的类型系统集成到了React方面。该项目是基于电子的，因此，从定义上讲，它是单仓库。我们遇到了各种各样的问题，导致无法识别导入语句。

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的流程设置，以便为您提供模块错误

全局设置流，并指向webstorm的js设置以使用Flow并将其指向flow-bin的全局副本（甚至不是exe，而仅是dir）

在.flowconfig中添加以下选项：

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

---

完整版本

必须完成一些基本步骤，才能使流程完全在Webstorm中工作：

全局安装流箱

一些消息来源声称流箱在全球范围内运行更好

全局安装流箱

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

  

仔细检查它是否为您提供了最新版本的流箱，   拒绝在0.75.0或更早版本上工作

设置Webstorm的流程可执行文件

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

  

在Windows +纱线上，这是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'

告诉流程使用“急速”模块系统：

module.system=haste

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