prefacio
Hola a todos, soy Liu Ming, un emprendedor veterano de diez años y entusiasta de la tecnología de código abierto.
Recientemente, el equipo de Nuxt lanzó la herramienta oficial para desarrolladores Nuxt DevTools.
- ¿Por qué el equipo oficial lanza Nuxt DevTools?
- ¿Qué funciones tiene Nuxt DevTools?
Con estas preguntas en mente, traduje el artículo oficial sobre la introducción de Nuxt DevTools al chino y lo compartí contigo.
Título original: Introducing Nuxt DevTools
Enlace original: https://nuxt.com/blog/introducing-nuxt-devtools
Autor: Anthony Fu
Fecha de lanzamiento: 24 de marzo de 2023
En Vue Amsterdam 2023, anunciamos la vista previa de Nuxt DevTools, una nueva herramienta para ayudarlo a comprender su aplicación Nuxt y mejorar aún más la experiencia del desarrollador. Hoy lanzamos una nueva versión secundaria 0.3.0 con un montón de actualizaciones y mejoras.
En esta publicación, exploraremos las razones detrás de la creación de Nuxt DevTools , cómo puede mejorar su experiencia de desarrollo y qué puede esperar del futuro .
experiencia de desarrollador
En los últimos años, ha habido un enfoque creciente en la experiencia del desarrollador (DX). Las herramientas y los marcos trabajan constantemente para mejorar DX. En el camino, Nuxt ha introducido muchas funciones y convenciones innovadoras para hacer que su desarrollo diario sea más fácil y eficiente.
En Nuxt 3, cambiamos a Vite como el paquete predeterminado para el reemplazo instantáneo de módulos en caliente (HMR) durante el desarrollo, creando un ciclo de retroalimentación más rápido para su flujo de trabajo. Además, presentamos Nitro, un nuevo motor de servidor que le permite implementar aplicaciones Nuxt en cualquier servicio de alojamiento como Vercel, Netlify, Cloudflare, etc. sin configuración.
Nuxt proporciona muchas prácticas comunes integradas:
- Escriba TypeScript y ESM listos para usar en toda su base de código.
- Cree aplicaciones de una sola página (SPA), renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) o combínelos por ruta, utilizando el mismo código base isomorfo sin ninguna configuración explícita.
- Use varias funciones componibles, como useState y useAsyncData, para compartir el estado en el acceso del lado del servidor y del lado del cliente.
- Las herramientas de SEO mejoradas, como useHead y useSeoMeta, hacen que la gestión de metaetiquetas sea muy sencilla.
Además, características como sistemas de diseño, complementos, middleware de enrutamiento y otras herramientas facilitan la creación de aplicaciones y las bases de código están más organizadas.
Convenciones como el enrutamiento basado en archivos y una API de servidor basada en archivos hacen que el enrutamiento sea intuitivo y fácil.
La importación automática de componentes facilita la creación de componentes compartidos que se pueden usar directamente en cualquier archivo Vue. A diferencia de los componentes globales, se dividen en código. También presentamos la importación automática de funciones compuestas, donde todas las API de Vue están disponibles de forma inmediata. Los módulos de Nuxt también permiten la importación automática de funciones compuestas nativas y personalizadas.
Recientemente, presentamos componentes solo del lado del cliente y del lado del servidor que se pueden usar agregando .clienty al nombre de archivo .server. Todas estas convenciones están completamente tipeadas, y los desarrolladores pueden incluso usar el autocompletado de tipos cuando navegan por rutas o obtienen datos de una API. Estas convenciones reducen significativamente el código repetitivo, evitan la duplicación y aumentan la productividad.
En términos de ecosistema, Nuxt tiene una gran comunidad de desarrolladores alrededor de los cuales construir módulos, proporcionando cientos de módulos de alta calidad. Los módulos permiten a los desarrolladores obtener la integración de la funcionalidad que desean sin preocuparse por la configuración o las mejores prácticas.
Problemas existentes
Nuxt facilita la creación de una aplicación a gran escala, pero hay un problema: la falta de transparencia .
Con cada nueva función y convención que presentamos, agregamos más abstracciones al marco.
La abstracción es una gran cosa para reducir la complejidad, hacer que la construcción sea más fácil y el trabajo más enfocado. Por otro lado, también suponen una carga adicional para el usuario a la hora de aprender y comprender los principios subyacentes. Por ejemplo, de dónde provienen los componentes importados automáticamente, o cuántos módulos están usando un determinado componente, etc. También hace que el código sea difícil de depurar.
Hay compensaciones, y debe aprender y comprender la herramienta para usarla de manera efectiva. Si bien hemos mejorado la documentación y brindado más ejemplos, creemos que existe una oportunidad para mejorar la falta de transparencia .
Presentamos Nuxt DevTools
Nuxt DevTools es una herramienta de visualización que lo ayuda a comprender su aplicación Nuxt y mejorar aún más la experiencia del desarrollador. Fue creado para aumentar la transparencia de Nuxt y las aplicaciones, encontrar cuellos de botella en el rendimiento y ayudarlo a administrar sus aplicaciones y configuraciones.
Se presenta como un módulo experimental y proporciona vistas dentro de su aplicación. Una vez instalado, agrega un pequeño ícono en la parte inferior de sus aplicaciones. Al hacer clic en él, se abrirá el panel DevTools.
Para probarlo, consulte la guía de instalación .
Introducción a las pestañas de Nuxt DevTools
Descripción general
Muestra una descripción general rápida de su aplicación, incluida la versión de Nuxt, las páginas, los componentes, los módulos y los complementos que está utilizando. También comprueba tu versión de Nuxt y te permite actualizar con un solo clic.
Paginas
La pestaña Páginas muestra sus rutas actuales y proporciona una forma rápida de navegar hasta ellas. Para el enrutamiento dinámico, también proporciona un formulario para completar cada parámetro de forma interactiva. También puede usar los cuadros de texto para jugar y probar cada ruta en busca de coincidencias.
Componentes
La pestaña Componentes muestra todos los componentes que usa en su aplicación y sus fuentes. También puede buscarlos e ir al código fuente.
También proporciona una vista gráfica que muestra las relaciones entre los componentes. Puede filtrar componentes para ver las dependencias de un componente específico. Esto puede ayudar a identificar dependencias inesperadas y mejorar el rendimiento de la página y el tamaño del paquete.
También puede usar la función Inspector para inspeccionar el árbol DOM y ver qué componente lo está representando. Haga clic para ir al editor de una línea específica. Los cambios se pueden realizar más fácilmente sin una comprensión profunda de la estructura del proyecto.
Importaciones
La pestaña Importaciones muestra todas las importaciones automáticas registradas con Nuxt. Puede ver qué archivos los están importando y de dónde provienen. Algunas entradas también pueden proporcionar una breve descripción y un enlace a la documentación.
Módulos
La pestaña Módulos muestra todos los módulos que ha instalado y proporciona enlaces a su documentación y código fuente. Puedes encontrar más módulos disponibles en Nuxt Modules.
Recientemente, lanzamos una función de actualización experimental que le permite actualizar fácilmente Nuxt o módulos. Utilice la pestaña Terminal, que muestra de forma transparente el resultado del proceso de actualización.
Activos
Pestaña de activos que muestra todos los activos estáticos y su información. Puede copiar las rutas a los activos o usar sus fragmentos de código. En el futuro, con la integración de Nuxt Image, incluso podrá optimizar imágenes con un solo clic.
Complementos
La pestaña Complementos muestra todos los complementos que ha utilizado en su aplicación. Dado que los complementos se ejecutan antes de que se instale la aplicación, el tiempo dedicado a cada uno debe ser mínimo para evitar bloquear la representación de la aplicación. El costo de tiempo proporcionado de cada complemento puede ayudar a encontrar cuellos de botella en el rendimiento.
Manos
La pestaña Hooks lo ayuda a controlar el tiempo dedicado a cada hook desde el lado del cliente y del servidor. También puede ver cuántos oyentes están registrados para cada gancho y cuántas veces son llamados. Esto ayuda a encontrar cuellos de botella en el rendimiento.
Configuración de la aplicación
Puede inspeccionar y modificar las configuraciones de la aplicación en DevTools, probar diferentes configuraciones y ver el efecto de inmediato.
Carga útil y datos
Esta pestaña muestra el estado creado por y . Puede ser útil comprender cómo se obtienen los datos y cómo se administra el estado, o cómo se cambia de forma pasiva para ver su impacto en su aplicación. Para y , también puede activar manualmente una recuperación. useStateuseAsyncDatauseFetchuseAsyncDatauseFetch
Terminales
En algunas integraciones, es posible que necesiten ejecutar subprocesos para realizar algún trabajo. Antes de DevTools, ocultaba por completo la salida del subproceso y se tragaba las advertencias/errores potenciales, o se conectaba a la salida estándar y contaminaba su terminal con múltiples salidas. Ahora puede obtener el resultado de cada proceso claramente aislado en DevTools.
Archivos virtuales
La pestaña Archivos virtuales muestra archivos virtuales compatibles con convenciones generados por Nuxt y Nitro. Esto ayuda con la depuración avanzada.
Inspeccionar
Inspeccionar expone integraciones que le permiten inspeccionar los pasos de transformación de Vite. Es útil comprender cómo cada complemento transforma su código y detectar posibles problemas.
Código VS
Gracias a VS Code Server, pudimos integrar una instancia completamente funcional de VS Code en DevTools. Puede instalar extensiones y sincronizar su configuración. Esto le permite tener un ciclo de retroalimentación más estricto donde puede realizar cambios en su código y ver los resultados inmediatamente sin salir de su navegador.
Vista contribuida del módulo
Con el ecosistema en mente, Nuxt DevTools está diseñado para ser flexible y extensible. Los módulos pueden aportar sus propias vistas a DevTools, proporcionando datos interactivos para su integración. Aquí están algunos ejemplos:
- El módulo VueUse proporciona una página de búsqueda de funciones de composición disponibles y visualiza su documentación.
- UnoCSS Modules proporciona un inspector interactivo para ver cómo cada módulo contribuye al CSS final.
- El módulo Nuxt Icon proporciona un motor de búsqueda para todos los iconos disponibles.
- El módulo Nuxt Vitest proporciona una interfaz de usuario Vitest para ejecutar pruebas utilizando la misma canalización que una aplicación Nuxt.
Para autores de módulos
Con el lanzamiento de v0.3.0, hemos mejorado la capacidad de los autores de módulos para contribuir a DevTools.
Esto incluye:
- Vista de contribución del módulo
- Utilidades para acceder al contexto de aplicaciones cliente y herramientas de desarrollo
- Funciones RPC personalizadas para comunicarse entre el servidor y el cliente
- Generación de subprocesos y optimización de resultados
@nuxt/devtools-kit- Un conjunto de utilidades para ayudarlo a integrar módulos con DevTools@nuxt/devtools-ui-kit- Componentes de la interfaz de usuario utilizados en DevTools para que la vista de su módulo sea coherente con el resto de DevTools- Plantilla de inicio para crear módulos con la integración de DevTools
Consulte la Guía del autor del módulo Devtools para obtener más información.
¿Qué más haremos?
Esto es solo el comienzo del viaje. Planeamos agregar más funciones a DevTools mientras exploramos formas de presentar datos de maneras más intuitivas e interesantes.
Los objetivos de Nuxt DevTools son:
- Mejorar la transparencia del acuerdo
- Comprobar el rendimiento y el análisis
- diversión interactiva
- documento personalizado
- Administre y cree aplicaciones fácilmente
- Proporcionar información y mejoras.
- Haga que la experiencia de desarrollo sea más placentera
Puede ayudarnos a mejorar DevTools al ver nuestra hoja de ruta del proyecto y compartir sus ideas y sugerencias.
Puede seguir las últimas actualizaciones siguiendo el repositorio de GitHub y siguiendo el Twitter oficial de Nuxt.
¡Gracias por leer, y esperamos sus comentarios y contribuciones!
La traducción termina aquí.
Soy Ming Liu, un emprendedor veterano de diez años y entusiasta de la tecnología de código abierto. Ya sea que se esté comunicando y aprendiendo, o tenga necesidades de desarrollo, bienvenido a contactarnos por mensaje privado.
Si tiene alguna pregunta, comuníquese con Lao Liu.