Configurar Flow cuando ya tienes Babel en su lugar

Configurar Flow cuando ya tienes Babel en su lugar

Flow es un verificador de tipo estático para JavaScript. Te hace más productivo al proporcionar comentarios mientras escribes el código. Flow le brinda advertencias en tiempo real que le indican cuándo ha cometido un error. Si desea obtener más información, visite flowtype.org.

En lugar de intentar construir su propio ecosistema completamente separado, Flow se engancha al ecosistema JavaScript existente. Usar Babel para compilar su código es una de las formas más fáciles de integrar Flow en un proyecto.

Después de dos años de arduo trabajo, Babel funciona prácticamente en todas partes, solo eche un vistazo a la página de configuración con integraciones para cada herramienta de construcción que pueda imaginar.

Si aún no ha configurado Babel, puede usar esa guía para configurarlo. También puede consultar mi manual sobre Babel.

Configurando Flow sobre Babel

Una vez que haya configurado Babel, es fácil comenzar con Flow. Primero instalemos dos dependencias:

$ npm install --save-dev babel-plugin-transform-flow-strip-types$ npm install --global flow-bin

El complemento de Babel está ahí para eliminar los tipos de flujo para que su programa se ejecute. flow-bin es la forma en que usa Flow desde la línea de comando.

A continuación, agreguemos el complemento de Babel a su .babelrc (o donde sea que esté configurando Babel con opciones):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Nota: Supongo que está utilizando Babel 6 para este tutorial. Se recomienda que actualice si aún no lo ha hecho.

Finalmente, ejecutaremos flow init en nuestro directorio, que creará un archivo .flowconfig que debería verse así:

[ignore]
[include]
[libs]
[options]

¡Increíble! Ahora tenemos Flow todo configurado en su proyecto. ¿Qué tal si comenzamos a ejecutarlo en algunos archivos?

Hacer que Flow funcione

Flow está diseñado para introducirse en su repositorio de forma incremental. Eso significa que no tiene que agregarlo a todo su código base de una sola vez. En su lugar, puede agregarlo archivo por archivo sobre la marcha. Comencemos con algo simple para comenzar.

Primero, intente encontrar un archivo que no tenga mucha complejidad o dependencias externas. Algo con solo un puñado de funciones simples para comenzar.

import {getNumberFromString} from "string-math-lib";
export function multiplyStrings(a, b) { return getNumberFromString(a) * getNumberFromString(b);}

Para que Flow se ejecute en este archivo, debemos agregar un comentario de "pragma de flujo" en la parte superior como este:

// @flow
import {getNumberFromString} from "string-math-lib";
export function multiplyStrings(a, b) { return getNumberFromString(a) * getNumberFromString(b);}

Este pequeño comentario en la parte superior del archivo le dice a Flow "Está bien, quiero que revises este archivo".

Ahora tenemos que ejecutar Flow por primera vez. Para hacer eso, deberá volver a su terminal y ejecutar el siguiente comando:

$ flow
Nota: este comando es un alias del estado del flujo .

Lo que hace este comando es iniciar un servidor de Flow y le pide el "estado" de su repositorio, que probablemente devolverá algunos errores para que usted los corrija.

Los errores más comunes que verá en un archivo nuevo son:

  • "Falta anotación"
  • "Módulo requerido no encontrado"

Estos errores están relacionados con las importaciones y exportaciones. La razón por la que surgen es el resultado de cómo funciona Flow. Para verificar los tipos en todos los archivos, Flow examina directamente las importaciones y exportaciones de cada archivo.

"Falta anotación"

Verá un error como este de Flow porque de alguna manera se relaciona con una exportación de su archivo. Aparte de eso, Flow no se quejará de la falta de anotaciones de tipo.

Entonces, para solucionarlo, podemos comenzar a agregar algunos tipos a su archivo. Para obtener una guía detallada sobre cómo hacerlo, consulte la guía del usuario. Lo que debería terminar es con algunos tipos como este:

import {getNumberFromString} from "string-math-lib";
export function multiplyStrings(a: string, b: string): number { return getNumberFromString(a) * getNumberFromString(b);}

Siga ejecutando el flujo a medida que agrega sus tipos para ver los efectos de lo que está haciendo. Eventualmente, debería poder borrar todos los errores de "Anotación faltante".

"Módulo requerido no encontrado"

Obtendrá estos errores cada vez que realice una importación / requiera que no se pueda resolver utilizando el algoritmo de módulo normal de Node o si lo ha ignorado con su .flowconfig .

Esto puede deberse a muchas cosas, tal vez esté usando un solucionador de paquetes web especial, tal vez olvidó instalar algo. Cualquiera sea el motivo, Flow necesita poder encontrar el módulo que está importando para hacer su trabajo correctamente. Tiene un par de opciones sobre cómo resolver esto:

  1. module.name_mapper: especifique una expresión regular para que coincida con los nombres de los módulos y un patrón de reemplazo.
  2. Cree una definición de biblioteca para el módulo que falta

Nos centraremos en crear una definición de biblioteca para el módulo, si necesita usar module.name_mapper , puede ver más al respecto en la documentación.

Crear una definición de biblioteca

Tener definiciones de biblioteca es útil para asignar tipos a los paquetes que ha instalado que no tienen tipos. Configuremos uno para nuestra biblioteca string-math-lib del ejemplo anterior.

Primero cree un directorio de tipo de flujo en su directorio raíz (el directorio donde coloca su .flowconfig ).

Puede usar otros nombres de directorio usando la sección [lib] de su .flowconfig . Sin embargo, el uso de tipo de flujo funcionará de inmediato.

Ahora crearemos un archivo de tipo de flujo / string-math-lib.js para contener nuestra "libdef" y comenzar así:

declare module "string-math-lib" { // ...}

A continuación, solo necesitamos escribir definiciones para las exportaciones de ese módulo.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Nota: Si necesita documentar la exportación "predeterminada" o primaria, puede hacerlo con declare module.exports: o declare export default

Hay mucho más en las definiciones de bibliotecas, por lo que debe leer la documentación y leer esta publicación de blog sobre cómo crear libdefs de alta calidad.

Instalación de una libdef de tipo de flujo

Debido a que libdefs puede consumir mucho tiempo, mantenemos un repositorio oficial de libdefs de alta calidad para todo tipo de paquetes llamados de tipo flujo.

Para comenzar con el tipo de flujo, instale la interfaz de línea de comandos (CLI) globalmente:

$ npm install --global flow-typed

Ahora puede buscar dentro de / definiciones / npm de tipo flujopara ver si hay un libdef existente para un paquete que desea usar, si lo hay, puede instalarlo así:

$ flow-typed install [email protected] --flowVersion 0.30

Esto le dice al tipo de flujo que desea instalar el paquete de tiza en la versión 1.0.0 cuando está ejecutando Flow 0.30 .

La CLI de tipo de flujo todavía está en versión beta y hay muchas mejoras planeadas, así que espere que esto mejore mucho en el futuro cercano.

Asegúrese de contribuir de nuevo a libdefs de tipo flujo. Es un esfuerzo de la comunidad, y cuanta más gente contribuya, mejor se vuelve.

Otros errores que puede encontrar:

Con suerte, hemos cubierto casi todo lo que se encontrará al comenzar con Flow. Sin embargo, también puede encontrarse con algunos errores como este:

  • El paquete dentro de node_modules informa errores
  • Leer node_modules está tomando mucho tiempo
  • JSON mal formado dentro de node_modules está causando errores

Hay varias razones para este tipo de errores en las que no entraré en esta publicación (estoy trabajando en documentación detallada para cada error individual). Por ahora, para mantenerse en movimiento, puede simplemente [ignorar] los archivos que están causando estos errores.

Esto significa agregar rutas de archivo a su sección [ignorar] en su .flowconfig de esta manera:

[ignore]./node_modules/package-name/*./node_modules/other-package/tests/*.json
[include]
[libs]
[options]

En general, existen mejores opciones que esta, pero esto debería ser un buen punto de partida.

Para ver algunos ejemplos de cómo manejar mejor los errores dentro de node_modules, vea esta respuesta de Stack Overflow sobre fbjs.

Consejo profesional: verificar qué tan bien está cubierto

Si alguna vez se pregunta qué tan bien está cubierto un archivo por Flow, puede usar el siguiente comando para ver un informe de cobertura:

$ flow coverage path/to/file.js --color

Recursos y soporte adicionales

Hay muchas cosas que no se tratan en este artículo. Así que aquí hay algunos enlaces a recursos que pueden ayudarlo.

  • Sitio web de Flow
  • Prueba Flow Online
  • Flujo de GitHub
  • Desbordamiento de pila #flowtyped

El equipo de Flow se compromete a asegurarse de que todos tengan una excelente experiencia al usar Flow. Si eso alguna vez no es cierto, nos encantaría saber de usted cómo mejorar.

Siga a James Kyle en Twitter. Siga a Flow en Twitter también.