Я пытаюсь добавить Flow в веб-шаблон Vue 2. Для записи я использую только время выполнения (файлы следуют за форматом .vue/стандарт).
Моя первая попытка состояла в том, чтобы использовать поток через cli, который я понял, что он не будет работать, потому что он не знал, как обрабатывать файлы .vue.
Моя вторая попытка состояла в том, чтобы добавить загрузчик webpack (а именно flow-status-webpack-plugin) и запустить проверку потока как часть сборки (например, eslint работает, например). Это не сработало, поэтому я рассмотрел другие варианты.
Моя третья попытка состояла в том, чтобы использовать плагин babel, который был сначала довольно успешным. Я использовал babel-plugin-typecheck + babel-plugin-syntax-flow. В Webpack нет выхода, однако ошибка типа приведет к поломке приложения. Я в порядке с этим подходом; он отлично справится с CI и сломает сборку.
Вот как выглядел мой .babelrc:
{
...
"plugins": [
...
["typecheck", {
"disable": {
"production": true
}
}],
"syntax-flow",
"transform-flow-strip-types"
],
...
}
В этот момент поток работает как ожидается для глобальных методов, но не работает внутри компонента 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>
Кроме того, цель состоит в том, чтобы не изменять код приложения из-за потока. В идеале я бы просто использовал 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?
