在WebStorm中使用Node.js和Flow

Question

我正在尝试使用Flow类型为Node.js项目设置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. 如果我点击源代码gutter中的箭头来运行测试，它会创建一个针对流源运行的新配置并失败

有没有人在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文件夹文件中的空白区域