Question

我正在进行个人项目，我希望整合flowtype。现在，在package.json中我得到了：

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

帮助babelify转录流式的语法，但它没有进行流式检查＆＃39;并且没有记录潜在的错误。我应该为https://www.npmjs.com/package/gulp-flowtype设置一个单独的gulp任务，或者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并添加：

＆＃13;

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

＆＃13;

Flowtype + babelify

3 个答案: