Vue.js 如何让 Flow 与 Vue 2 (webpack) 一起正常工作

我正在try 向Vue 2网页包模板添加Flow.作为记录，我只在运行时(文件遵循.vue格式/标准).

我的第一次try 是通过cli使用flow，我意识到它不会工作，因为它不知道如何处理.vue个文件.

我的第二次try 是添加一个webpack加载程序(即flow-status-webpack-plugin)，并在构建过程中运行流判断(例如eslint works).但没有成功，所以我研究了其他 Select .

我的第三次try 是使用一个babel插件，一开始相当成功.我用了babel-plugin-typecheck+babel-plugin-syntax-flow.Webpack中没有输出，但是类型错误会 destruct 应用程序.我同意这种方法；它与CI配合使用会很好，并且会 destruct 构建.

以下是我的.babelrc岁生日的样子:

{
  ...
  "plugins": [
    ...
    ["typecheck", {
      "disable": {
        "production": true
      }
    }],
    "syntax-flow",
    "transform-flow-strip-types"
  ],
  ...
}

此时，Flow与全局方法的预期一样工作，但在Vue组件中不起作用:

<template>...</template>

<script>
/* @flow */
const flowIt = (a: number): number => {
  return a * 10
}

flowIt(20)
flowIt('bah') // Uncaught TypeError: Value of argument "a" violates contract. Expected: number Got: string

export default {    
  mounted: function () {
    flowIt(20)
    flowIt('bah') // Sees nothing wrong here
  }
}
</script>

<style>...</style>

除此之外，我们的目标是不要因为流量而更改应用程序代码.理想情况下，我会像往常一样使用Vue:

<template>...</template>

<script>
/* @flow */
export default {  
  methods: {
    flowIt (a: number): number {
      return a * 10
    }
  },

  mounted: function () {
    this.flowIt(20)
    this.flowIt('bah') // Should throw a type error.
  }
}
</script>

<style>...</style>

不确定这是否与Vue有那么大的关系，就像我对Flow的体验一样(提示:没有那么丰富的经验).我想我需要一些类型文件，让Flow"理解"Vue组件的 struct (我猜指令也是如此).

对于那些有更多经验的人来说，你是如何让Flow正确使用Vue+webpack的？