webpack - 如何使Flow能够与Vue 2(Webpack)一起正常使用？

我正在尝试将Flow添加到Vue 2 Webpack模板中。作为记录，我仅在运行时使用(文件遵循.vue格式/标准)。

我的第一个尝试是使用cli中的流，但我发现它不起作用，因为它不知道如何处理.vue文件。

我的第二次尝试是添加一个webpack加载器(即flow-status-webpack-plugin)，并在构建过程中运行Flow check(例如eslint起作用)。那没有解决，所以我研究了其他选择。

我的第三次尝试是使用babel插件，起初相当成功。我使用了babel-plugin-typecheck + babel-plugin-syntax-flow。 Webpack中没有输出，但是类型错误会破坏应用程序。我对这种方法很好；它可以与配置项一起正常工作并破坏构建。

这是我的.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一起使用？

最佳答案

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

 /* @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操作和 getter ，其他javascript导入的模块)，并且如果您在组件的方法中扩展了业务逻辑，则在使用方法参数时可以获得某种类型的安全性。

关于webpack - 如何使Flow能够与Vue 2(Webpack)一起正常使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40105053/