Knip: una herramienta automatizada para buscar archivos, exportaciones y dependencias no utilizados

 

 

 

  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman
  • Accesibilidad para diseñadores, con Stéphanie Walter

  • Índice
    1. Tiene que haber una mejor manera
    2. Trabajando hacia una solución
    3. Presentamos Knip
    4. Cómo funciona Knip
      1. Modo de producción
      2. Guiones
      3. Complementos
      4. Compiladores
      5. Actuación
      6. Consejos de configuración
      7. Reporteros
    5. ¿Qué sigue para Knip?
      1. Más complementos = menos configuración
      2. Reparación automática
      3. Integraciones
    6. Cuchillo de demostración
    7. Conclusión

    La mayoría de los proyectos tienen al menos algunos archivos, exportaciones y dependencias no utilizados, a menudo porque es difícil saber cuándo una cosa depende de otra y da miedo eliminar algo que no estás seguro de que esté en uso. Lars Kappert comparte una herramienta en la que ha estado trabajando y que ofrece una solución: conozca a Knip que, en su forma más básica, busca proyectos en busca de estos artefactos no utilizados.

     

    Seamos sinceros. La mayoría de nosotros preferimos la creación de nuevas funciones e interfaces de usuario a las tareas de mantenimiento, como la limpieza de código, la configuración de proyectos y la gestión de dependencias.

    Muchas de las cosas aburridas y repetitivas, como el formateo y el linting, son en su mayoría problemas resueltos con herramientas como Prettier, ESLint y TypeScript.

    Sin embargo, hay otra área que a menudo no recibe mucha atención: el manejo de archivos, exportaciones y dependencias no utilizados . Esto es especialmente cierto a medida que los proyectos crecen con el tiempo, lo que afecta negativamente la mantenibilidad y nuestro entusiasmo por ella. Estos artefactos no utilizados a menudo pasan desapercibidos porque suelen ser difíciles de encontrar.

    ¿Por dónde empiezas a buscar cosas sin usar? Apuesto a que has realizado una búsqueda global de una dependencia para saber si todavía se utiliza. ¿Sabía que puede hacer clic derecho en un archivo y "Buscar referencias de archivos" en VS Code? Estas son las cosas que no deberías tener que hacer. Son tareas tediosas que pueden (y deben) automatizarse.

    Tiene que haber una mejor manera

    Cuando estaba en una base de código en expansión, la cantidad de archivos no utilizados y exportaciones seguía creciendo. Seguirlos se volvió cada vez más difícil, así que comencé a buscar soluciones automatizadas que me ayudaran.

    Me alegré de haber encontrado algunas herramientas existentes, como ts-prune . Después de algunas ejecuciones iniciales, descubrí que nuestro código base requería mucha configuración y aún producía muchos falsos positivos. Investigué cómo otras bases de código intentan mantenerse ordenadas y me di cuenta de que hay una gran oportunidad en este espacio.

    En el camino, también encontré depcheck , que se ocupa de mucha complejidad y personalizaciones en proyectos de JavaScript. Y luego está unimported , que también hace un trabajo notable al encontrar archivos pendientes y dependencias no utilizadas.

    Pero ninguna de estas herramientas manejó muy bien mi proyecto. El hecho de que tuviera que usar una combinación de ellos no sería un obstáculo, pero no podía conseguir las configuraciones correctas para manejar las personalizaciones del proyecto sin reportar demasiados falsos positivos o ignorar demasiado del proyecto y dejar un gran punto ciego.

    Al final, las herramientas en este ámbito sólo se utilizan cuando están totalmente automatizadas y son capaces de cubrir todo el proyecto. Tampoco ayudó que ninguna de las herramientas existentes admita monorepos, una estructura para repositorios que recientemente ha ganado gran popularidad. Por último, pero no menos importante, tanto ts-prune como depcheck están en modo de mantenimiento, lo que significa que probablemente nunca admitirán monorepos.

    Trabajando hacia una solución

    Me motiva automatizar cosas y mantener los proyectos en forma sólida.

    La excelente experiencia de desarrollador (DX) mantiene a los desarrolladores felices y productivos.

    Entonces comencé a desarrollar una herramienta interna para mi proyecto para ver si podía hacerlo mejor. Comenzó como un script interno que manejaba solo los detalles de ese repositorio en particular y, a lo largo del viaje, me fui dando cuenta de la bendición y la maldición que es esto. Automatizar cosas aburridas es un concepto ganador, pero hacerlo bien es un desafío muy difícil, pero estaba dispuesto a intentarlo.

     

    A lo largo del camino, también me convencí cada vez más de que una sola herramienta para encontrar todas las categorías de cosas no utilizadas era una buena idea: cada una de ellas requiere leer y analizar archivos fuente, y dado que esta es una tarea relativamente costosa, creo que la eficiente El camino es rastrearlos de una sola vez.

    Presentamos Knip

    Entonces, ¿qué es Knip? Creo que es mejor categorizarlo como linter de proyecto . Continúa donde termina ESLint. Mientras que ESLint maneja archivos individuales, Knip procesa el repositorio en su conjunto. Conecta todos los puntos (en términos de archivos, importaciones, exportaciones y dependencias) e informa lo que no se utiliza.

    En términos generales, hay dos formas de ver a Knip. En proyectos totalmente nuevos, es fantástico instalar Knip y dejarlo crecer con el proyecto. Mantenga el repositorio ordenado y ejecute Knip manualmente o en un entorno de integración continua (CI) automatizado.

    Otra forma de ver a Knip es en proyectos más grandes. Knip es un gran compañero para la limpieza en lo que respecta a identificar archivos, exportaciones y dependencias no utilizados. Puede haber falsos positivos inicialmente, pero es mucho más fácil omitirlos en comparación con encontrar agujas en un pajar por su cuenta.

    Además, durante o después de grandes esfuerzos de refactorización, Knip puede ser un gran asistente para limpiar las cosas. Es humano perder u olvidar cosas que ya no se usan, más aún cuando las cosas no están cerca del trabajo de refactorización.

    Knip funciona con JavaScript tradicional y TypeScript moderno, tiene soporte integrado para monorepos, funciona con cualquier administrador de paquetes y tiene muchas características, pequeñas y grandes, que lo ayudan a mantener sus proyectos.

    Cómo funciona Knip

    Knip comienza con uno o más archivos de entrada y calcula el árbol de dependencia, lo que le ayuda a conocer todos los archivos que se utilizan mientras marca los archivos restantes como no utilizados.

    Mientras tanto, Knip realiza un seguimiento de las dependencias externas importadas y las compara con las dependencias para package.jsoninformar tanto de las dependencias no utilizadas como de las que se utilizan pero no figuran en la lista. También realiza un seguimiento de las importaciones y exportaciones internas para informar sobre las exportaciones no utilizadas.

    Déjame darte un mejor vistazo debajo del capó.

    Modo de producción

    En su modo predeterminado , Knip analiza todo el proyecto, incluidos los archivos de producción y no producción, como pruebas, configuraciones, historias de Storybook, devDependenciesetc.

     

    Un ejemplo ejecutado utilizando el reportero predeterminado. ( Vista previa grande )

    Pero este modo podría perder oportunidades de recorte. Por ejemplo, los archivos o exportaciones importados únicamente mediante pruebas normalmente no se informan como no utilizados. Sin embargo, cuando la exportación no se utiliza en ningún otro lugar, puede eliminar tanto la exportación como sus pruebas.

    Por eso Knip tiene un modo de producción . Este modo es más estricto que el modo predeterminado, donde Knip usará solo código de producción como archivos de entrada y solo considerará dependencies(excluyendo devDependencies).

    Guiones

    Muchos proyectos utilizan herramientas de línea de comandos que vienen con dependencias. Por ejemplo, después de instalar ESLint, puede usar eslinty Angular lo pone nga disposición "scripts"en package.json. Knip conecta dependencias con binarios y le avisa cuando faltan o no se utilizan.

    Pero hay más. Los entornos de CI, como Azure y GitHub Actions, están configurados con archivos YAML que también pueden usar las mismas herramientas de línea de comandos.

    Y, por último, los scripts personalizados pueden utilizar herramientas de línea de comandos generando procesos secundarios, ya sea utilizando API nativas de Node.js o con bibliotecas como zxo execa.

    Knip tiene un número creciente de detecciones de este tipo para mantener sus proyectos limpios y ordenados, refactorización tras refactorización. Sin embargo, ¿qué tienen de interesante esos guiones? Pueden ser complicados de analizar, lo que dificulta la extracción de sus dependencias. Veamos un ejemplo:

    node -r @scope/package/register --experimental-loader ts-node/esm/transpile-only ./dir

    Aquí podemos encontrar @scope/packagey ts-nodeson dir/index.tsdependencias de este script. Sinceramente, esto es sólo la punta del iceberg. ¡Prometo que unas pocas expresiones regulares no serán suficientes!

    Ahora, si este script se actualiza o elimina, Knip le informará si alguna dependencia o archivo ya no se utiliza. Por otro lado, Knip también le dirá si se utiliza una dependencia pero no se enumera explícitamente en el archivo package.json. (De todos modos, no deberías confiar en dependencias transitivas, ¿verdad?)

    Complementos

    Hay una gran cantidad de herramientas disponibles en el ecosistema de JavaScript. Y cada herramienta tiene sus configuraciones. Algunos permiten YAML o JSON, y otros le permiten (o requieren) escribir configuraciones en JavaScript o incluso TypeScript.

    Dado que no existe una forma genérica de manejar la gran cantidad de variaciones, Knip admite complementos . Knip tiene complementos para herramientas que pueden hacer referencia a dependencias que deben enumerarse en package.json.

    Lo que importa para los complementos es cómo se hace referencia a las dependencias. Pueden importarse en JavaScript como cualquier otro archivo fuente, y Knip también puede analizarlos como tales. Sin embargo, a menudo se hace referencia a ellos como cadenas, de forma muy similar a lo que hace ESLint con las opciones extendsy plugins. Las dependencias se pueden especificar de forma implícita, como prettier, que significa la eslint-config-prettierdependencia. Storybook tiene la builder: "webpack5"configuración que requiere las dependencias @storybook/builder-webpack5y @storybook/manager-webpack5.

     

    Compiladores

    Knip analiza todo tipo de archivos JavaScript y TypeScript, incluidos módulos ES y módulos CommonJS.

    Pero algunos frameworks funcionan con archivos no estándar, como Vue, Svelte, MDX y Astro. Knip le permite configurar compiladores para incluir este tipo de archivos para que también puedan incluirse en el análisis.

    Actuación

    Hasta la versión 2, Knip usaba ts-morph para calcular el gráfico de dependencia (y mucho más). Esto funcionó muy bien inicialmente porque abstrajo el back-end de TypeScript.

    Pero para admitir monorepos y compiladores y al mismo tiempo mantener un buen rendimiento, me di cuenta de que tenía que trabajar directamente con el back-end de TypeScript. Esto requirió mucho esfuerzo, pero brinda mucha más flexibilidad, así como oportunidades para más optimizaciones. Por ejemplo, Knip puede recorrer el árbol de sintaxis abstracta (AST) de cualquier archivo sólo una vez para encontrar todo lo que necesita.

    Consejos de configuración

    Cuando Knip informa un falso positivo, puede configurarlo para ignorar esa dependencia. Luego, cuando Knip ya no informe el falso positivo, informará que la configuración se puede actualizar y usted podrá eliminar los elementos ignorados.

    Reporteros

    Knip viene con un reportero predeterminado y tiene algunos reporteros adicionales. Hay un reportero compacto, un reportero JSON y uno que usa el CODEOWNERSarchivo para mostrar los propietarios del código con cada problema reportado.

    Knip también le permite definir un reportero personalizado. Knip llamará a su función con los resultados del análisis. Luego puedes hacer cualquier cosa con él, como escribir los resultados en un archivo o enviarlo a un servicio para realizar un seguimiento del progreso a lo largo del tiempo.

    ¿Qué sigue para Knip?

    Naturalmente, aún no he terminado de trabajar en Knip. Estas son algunas de las cosas que tengo en mente.

    Más complementos = menos configuración

    Mi esperanza con Knip es que a medida que más y más personas comiencen a usar Knip, informarán falsos positivos: algo se informa como no utilizado pero está en uso.

    Un falso positivo suele tener una de las tres causas siguientes:

    • Se utiliza un marco o herramienta para el cual Knip aún no tiene un complemento,
    • Es posible que sea necesario mejorar la configuración; por ejemplo, agregar un archivo de entrada que Knip no conocía o ignorar algo con una referencia difícil de encontrar, o
    • Knip tiene un error.

    A medida que Knip mejora con correcciones de errores y complementos, más proyectos se benefician porque necesitan menos configuración. ¡El mantenimiento será más agradable y fácil para todos!

    Cuando utilice Knip y lo disfrute, no deje que los falsos positivos le asusten, infórmelo. Proporcione un caso de prueba reproducible y estoy seguro de que podremos resolverlo. Además, escribí una guía completa que detalla cómo escribir un nuevo complemento para Knip.

    Reparación automática

    Al igual que ESLint, Knip tendrá una --fixopción para solucionar automáticamente todo tipo de problemas. La idea es que esto pueda encargarse automáticamente de cosas como:

    • Elimine la exportpalabra clave para exportaciones no utilizadas,
    • Desinstalar dependencias no utilizadas e instalar dependencias no enumeradas, y
    • Eliminar archivos no utilizados.

    Dado el suficiente interés de la comunidad, ¡estoy emocionado de comenzar a desarrollar esta función!

    Integraciones

    Integraciones como un complemento VS Code o una acción GitHub suenan como oportunidades interesantes. Estoy feliz de colaborar y ver hasta dónde podemos llevarlo.

    Cuchillo de demostración

    Creo que la mejor manera de entender a Knip es tenerlo en tus manos. Entonces, he creado una plantilla CodeSandbox con la que puedes bifurcar y activar Knip en una nueva terminal npm run knip.

    • Abrir demostración

    Conclusión

    Knip tiene como objetivo ayudarlo a mantener sus repositorios de JavaScript o TypeScript, y estoy muy feliz de que Knip ya corte muchos proyectos diariamente.

    ¡Hay mucho margen de mejora, errores que corregir, documentación que mejorar y complementos que agregar! Sus ideas y contribuciones son absolutamente bienvenidas y alentadas en github.com/webpro/knip .

    (yk)Explora más en

    • javascript
    • Herramientas
    • Flujo de trabajo





    Tal vez te puede interesar:

    1. 50 herramientas útiles de JavaScript
    2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
    3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    4. Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    Knip: una herramienta automatizada para buscar archivos, exportaciones y dependencias no utilizados

    Knip: una herramienta automatizada para buscar archivos, exportaciones y dependencias no utilizados

    Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman Accesibilidad para diseñadores, con Stéphanie Walter Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-knip-una-herramienta-automatizada-para-buscar-archivos-1176-0.jpg

    2024-04-04

     

    Knip: una herramienta automatizada para buscar archivos, exportaciones y dependencias no utilizados
    Knip: una herramienta automatizada para buscar archivos, exportaciones y dependencias no utilizados

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20