【发布时间】：2017-02-27 12:56:18
【问题描述】：
我正在尝试将 Flow 添加到 Vue 2 webpack 模板中。作为记录，我只在运行时（文件遵循.vue 格式/标准）。
我的第一次尝试是通过 cli 使用 flow，但我意识到它不会起作用，因为它不知道如何处理 .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 正常工作的？
【问题讨论】：
标签： webpack vue.js vuejs2 babeljs flowtype