如何让Flow正常使用Vue 2(webpack)？

Question

我正在尝试将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的？

Answer 1

通过注释掉和部分<template>，您仍然可以将Flow用于.vue组件的JS 部分：<style><script>

 /* @flow
 <style>
 ...style definitions here
 </style>
 <template>
 ...html...
 </template>
 */
 // <script>
 export default {  
   methods: {
      flowIt (a: number): number {
         return a * 10
      }
   },

   mounted: function () {
      this.flowIt(20)
      this.flowIt('bah') //Won't throw error, as flowIt is attached to
                         //this.
   }
}
// </script>

vue编译器<template>, <style> and <script>即使在注释后仍会识别这些部分，但是Flow类型检查器将忽略它们，仅处理适当的javascript部分。

不幸的是，这不会为您提供100％的类型覆盖率，因为Flow将无法检查所连接的函数和对象this（Vue组件本身），但是，您仍然可以从Flow的对外部函数调用的类型检查中受益（例如Vuex操作和获取器，其他javascript导入的模块），如果您在组件的方法中扩展了业务逻辑，则在使用方法参数时可以得到某种类型的安全性。

Answer 2

使用eslint + flow

这是集成流和vue的另一种方法.同时,flow来了eslint.因此,我们可以直接得到流量错误作为lint错误.这是一种更简洁的方法,但随后流程与您的构建过程相结合(您无法flow check独立运行,但需要通过webpack运行整个构建管道以获取错误).仍在等待此问题得到解决,以便在2017年5月10日的.vue文件中获得全流程支持.

对于大多数情况来说很好,但有些人可能仍然希望运行的灵活性(和速度)flow check.这可能还取决于您的CI设置.

以下是设置流量和夹具的方法:

1. 安装deps

   yarn add \
     babel-plugin-syntax-flow \
     babel-plugin-transform-class-properties \
     babel-plugin-transform-flow-strip-types \
     eslint \
     babel-eslint \
     eslint-plugin-html \
     eslint-plugin-flowtype-errors \
     eslint-plugin-vue \
     eslint-config-vue \
     flow-bin \
   -D
   

2. 配置 .babelrc

   {
     ...
     "plugins": [
       "babel-plugin-transform-class-properties",
       "babel-plugin-syntax-flow",
       "babel-plugin-transform-flow-strip-types"
     ]
   }
   

3. 配置 .eslintrc

   {
     "parser": "babel-eslint",
   
     "plugins": [
       "html",
       "flowtype-errors"
     ],
   
     "extends": [
       "vue"
     ],
   
     "rules": {
       "flowtype-errors/show-errors": 2
     }
   }
   

4. 创建一个.flowconfig文件.如果您无需配置,它可以为空.

在这种情况下,不需要其他解决方法,您可以/* @flow */在任何.vue文件中使用脚本标记.在这里查看原始帖子.