在WebStorm中将Node.js与Flow结合使用

Question

我正在尝试为Node.js项目的Flow类型设置WebStorm。

我使用NPM脚本都可以正常工作，但是希望与IDE集成。

这是我的package.json的脚本部分：

"scripts": {
    "dev":
    "watch --wait=1 'flow-remove-types src/ -d lib/ --all --pretty' ./src/ & nodemon ./lib/server.js",
    "start": "npm run flow:build && node ./lib/",
    "lint": "eslint src/**",
    "test": "npm run flow:build && jest lib",
    "coverage": "jest --collectCoverageFrom=src/**.js --coverage src",
    "flow": "flow",
    "flow:check": "flow check ./src/",
    "flow:build": "flow-remove-types ./src/ -d ./lib/ --all --pretty",
    "flow:deps": "flow-typed install",
    "flow:watch": "flow-watch"
  },

现在，如果我修改测试的运行配置，并且：

• 将src目录更改为lib
• 指定启动前，运行NPM脚本'flow：build'

然后我可以运行该配置。

我仍然有两个问题。

1. 调试不会在断点上停止
2. 如果我点击源代码装订线中的箭头以运行测试，它将创建一个新配置，该配置针对流源运行并失败

任何人都可以在WebStorm中拥有Node.js并可以很好地协同工作吗？

Answer 1

1. flow-remove-types不会生成源映射，因此调试器绝对无法将lib中的生成文件映射到src中的原始文件。如果要调试测试，则必须在lib文件夹中的生成文件中添加断点

2. 不可能-为按箭头的文件生成配置。如果要从装订线运行单个测试，请按生成的文件而不是源文件中的箭头

您可以使用Babel flow preset代替flow-remove-types：

• npm install --save-dev babel-cli babel-preset-env babel-preset-flow
• 在您的项目根目录中创建一个.babelrc文件：

{ "presets": ["flow"] }

这就是您所要做的-无需预编译等，从装订线/调试源文件开始运行，即可使用

Answer 2

您可以使用--sourcemaps和-pretty标志：

flow-remove-types --pretty --sourcemaps --out-dir out/ in/

• -m或--sourcemaps标志将sourcemaps文件添加到您的/ out文件夹中

• -p或--pretty标志删除/ out文件夹文件中的空白