我正在尝试将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 一起正常工作的?