我正在尝试将Flow添加到 Vue 2 webpack-template。为了记录，我只在运行时（文件遵循.vue格式/标准）。
我的第一次尝试是通过 cli 使用流，我意识到它不会工作，因为它不知道如何处理.vue文件。
我的第二次尝试是添加一个 webpack 加载器（即 flow-status-webpack-plugin）并运行 Flow check 作为构建的一部分（例如eslint作品）。那没有成功，所以我研究了其他选择。
我的第三次尝试是使用 babel 插件，一开始还算成功。我使用了 babel-plugin-typecheck + babel-plugin-syntax-flow。Webpack 中没有输出，但是类型错误会破坏应用程序。我对这种方法很好；它可以与 CI 一起正常工作并破坏构建。
这是我的.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>
最重要的是，目标是不要因为 Flow 而更改应用程序代码。理想情况下，我会像往常一样使用 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 组件的结构（我猜对指令也是如此）。
对于那些有更多经验的人，您是如何让 Flow 与 Vue + webpack 一起正常工作的？