Referencia de herramientas de desarrollador y extensiones de fuente: WASM, TSX, GraphQL y más
El conjunto de herramientas del desarrollador moderno está lleno de formatos de archivo especializados. Desde módulos WebAssembly compilados hasta archivos de definición de tipos y lenguajes específicos de dominio para bases de datos, comprender estas extensiones es clave para navegar por cualquier base de código moderna.
Esta guía de referencia explica el "quién, qué y por qué" de las extensiones de archivo comunes específicas del desarrollo.
Tabla de referencia rápida: Extensiones de fuente de desarrollo
| Extensión | Nombre completo | Ecosistema | Propósito |
|---|---|---|---|
.wasm |
WebAssembly Binary | Web / Edge Computing | Código compilado para aplicaciones web de alto rendimiento |
.wat |
WebAssembly Text | Desarrollo Web | Versión legible por humanos de WASM |
.map |
Source Map | Desarrollo Web | Mapeo de código minificado a la fuente original para depuración |
.d.ts |
Type Definition | TypeScript | Descripción de la estructura de las bibliotecas de JavaScript |
.tsx / .jsx |
TypeScript/JS XML | React / Solid | Combinación de lógica e interfaz de usuario en un solo archivo |
.vue / .svelte |
Vue/Svelte Component | Vue / Svelte | Componentes de archivo único (SFC) |
.astro |
Astro Component | Astro Framework | Componentes web basados en islas |
.mdx |
Markdown con JSX | Documentación | Documentación interactiva con componentes de React |
.prisma |
Prisma Schema | Base de datos / ORM | Definición de modelos y relaciones de base de datos |
.graphql / .gql |
GraphQL Query/Schema | APIs / GraphQL | Definición de esquemas de API y consultas de datos |
1. La web de alto rendimiento (.wasm, .wat)
WebAssembly (WASM) permite que el código escrito en lenguajes como C++, Rust o Go se ejecute en el navegador a velocidades cercanas a las nativas.
- WASM: Un archivo binario que ejecuta el navegador. No se edita directamente.
- WAT: El formato de texto legible por humanos de WASM. Se parece a Lisp (muchos paréntesis) y se utiliza para la inspección manual o para aprender cómo funciona WebAssembly.
2. TypeScript y React (.d.ts, .tsx, .jsx)
A medida que la web avanzaba hacia una interfaz de usuario "basada en componentes", se necesitaron nuevos formatos para mezclar etiquetas similares a HTML con lógica de JavaScript/TypeScript.
- JSX / TSX: Utilizado por React y frameworks similares. Le permite escribir etiquetas
<div>directamente dentro de sus funciones. - D.TS: Estos son archivos de "declaración". No contienen ningún código ejecutable; simplemente le dicen al compilador de TypeScript qué funciones y variables existen en una biblioteca de JavaScript, proporcionándole un mejor autocompletado (IntelliSense).
3. Componentes de frameworks modernos (.vue, .svelte, .astro)
Muchos frameworks modernos utilizan Componentes de archivo único (SFC), donde el HTML, CSS y la lógica para un elemento de interfaz de usuario específico conviven en un solo archivo.
- Vue y Svelte: Utilizan extensiones específicas para su lógica de componentes.
- Astro: Un framework más nuevo (¡que impulsa este mismo sitio!) que le permite usar componentes de cualquier otro framework (React, Vue, Svelte) juntos.
4. Esquemas de bases de datos y API (.prisma, .graphql)
A medida que las aplicaciones se vuelven más complejas, necesitamos lenguajes dedicados para definir cómo se estructuran los datos y cómo se consultan.
- Prisma: Un conjunto de herramientas de base de datos moderno. Define sus tablas y relaciones en un archivo
.prisma, y este genera automáticamente la base de datos por usted. - GraphQL: Una alternativa a las API REST. Los archivos
.graphqldefinen el "Esquema" (qué datos están disponibles) y las "Consultas" (exactamente qué datos desea obtener).
5. Depuración y documentación (.map, .mdx)
- Mapas de fuente (.map): Cuando despliega código, generalmente se "minifica" en una sola línea ilegible para ahorrar espacio. Un archivo
.maple dice al depurador de su navegador exactamente qué línea del código fuente original corresponde a la línea minificada, lo que hace posible depurar su aplicación en producción. - MDX: Lo mejor de ambos mundos: le permite escribir Markdown estándar pero importar y usar componentes de React dentro del documento. Perfecto para documentación técnica interactiva.
Preguntas comunes (FAQ)
P: ¿Por qué no puedo ejecutar un archivo .wasm directamente?
R: WASM es un formato de bajo nivel diseñado para ser ejecutado por una máquina virtual (generalmente dentro de un navegador web o un entorno de ejecución como Wasmtime). Necesita un entorno "host" para gestionar la memoria y las entradas/salidas.
P: ¿Debo incluir los archivos .map en mi repositorio Git?
R: Generalmente, no. Los mapas de fuente se generan durante el proceso de construcción. Sin embargo, debe cargarlos en su servicio de seguimiento de errores (como Sentry) para poder ver seguimientos de pila legibles cuando ocurran errores.
P: ¿Cuál es la diferencia entre .gql y .graphql?
R: No hay diferencia técnica. Ambos se utilizan para esquemas y consultas de GraphQL. La mayoría de los complementos de IDE reconocen ambos por igual.
Herramientas relacionadas en Tool3M
- Formateador JSON: Útil para inspeccionar los datos JSON devueltos por sus consultas GraphQL.
- Minificador de código: Comprima su código y genere mapas de fuente para un mejor rendimiento.