Flowtype + babelify答案

【问题标题】：Flowtype + babelifyFlowtype + babelify
【发布时间】：2016-04-07 07:34:07
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript babeljs flowtype

【解决方案1】：

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

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

【讨论】：

【解决方案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"
      ],
    }
  }
}

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

【讨论】：

【解决方案3】：

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

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

【讨论】：