流式 + babelify

Question

我正在进行我的个人项目，我想集成 flowtype。现在，在 package.json 我得到了：

"babel-plugin-syntax-flow": "6.3.13"

这有助于 babelify 转录流类型的语法，但它不会 'flow check' 并且不会记录潜在的错误。我应该为它设置一个单独的 gulp 任务和一个单独的包，比如 https://www.npmjs.com/package/gulp-flowtype 还是 babel-plugin-syntax-flow 也应该处理错误日志记录？

Answer 1

Babel 对 Flow 的唯一了解是如何解析它，使其不会导致语法错误。通常你会使用 babel-plugin-transform-flow-strip-types，它会启用你现在拥有的语法插件，然后删除流类型，这样它们就不会出现在你的最终输出中。如果您使用 Babel 预设 react.

，这也会默认启用

您肯定仍然需要使用 Flow 的标准类型检查器来进行实际的静态分析。

Answer 2

这是我的工作解决方案：

您需要安装：

$ npm i --save-dev babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types babel-plugin-typecheck

然后添加

"typecheck",
"syntax-flow",
"transform-flow-strip-types",

到你的 .babelrc 配置

这是我的配置示例：

{
  "presets": ["stage-2", "es2015", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators-legacy",
    "typecheck",
    "syntax-flow",
    "transform-flow-strip-types",
    "transform-async-to-generator"
  ],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    },
    "test":{
      "presets": ["stage-2", "es2015", "react"],
      "plugins": [
        "react-hot-loader/babel",
        "transform-decorators-legacy",
        "typecheck",
        "syntax-flow",
        "transform-flow-strip-types",
        "transform-async-to-generator"
      ],
    }
  }
}

这将在运行时和您的控制台中输出错误。

Answer 3

自 2017 年 6 月起，您只需 npm i --save-dev flow-runtime 并添加：

{
  "plugins": [["flow-runtime", {
    "assert": true,
    "annotate": true
  }]]
}

流式 + babelify

Flowtype + babelify

javascript

babeljs

flowtype