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; 博士;

在 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/[your username]/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 设置边注

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

重现我的问题

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

模块问题的解决方案

这是我当前的 .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”。告诉它使用匆忙意味着它会正确地找到你的导入语句。有关仓促的更多信息，请点击此处