Référence des outils de développement et des extensions source : WASM, TSX, GraphQL, etc.
La boîte à outils du développeur moderne regorge de formats de fichiers spécialisés. Des modules WebAssembly compilés aux fichiers de définition de types, en passant par les langages spécifiques au domaine pour les bases de données, comprendre ces extensions est essentiel pour naviguer dans n'importe quel codebase moderne.
Ce guide de référence explique le « qui, quoi et pourquoi » des extensions de fichiers courantes spécifiques au développement.
Tableau de référence rapide : Extensions source de développement
| Extension | Nom complet | Écosystème | Objectif |
|---|---|---|---|
.wasm |
WebAssembly Binary | Web / Edge Computing | Code compilé pour les applications web haute performance |
.wat |
WebAssembly Text | Développement Web | Version lisible par l'homme de WASM |
.map |
Source Map | Développement Web | Mappage du code minifié vers la source originale pour le débogage |
.d.ts |
Type Definition | TypeScript | Description de la structure des bibliothèques JavaScript |
.tsx / .jsx |
TypeScript/JS XML | React / Solid | Combinaison de la logique et de l'interface utilisateur dans un seul fichier |
.vue / .svelte |
Vue/Svelte Component | Vue / Svelte | Composants monofichiers (SFC) |
.astro |
Astro Component | Astro Framework | Composants web basés sur des îles |
.mdx |
Markdown avec JSX | Documentation | Documentation interactive avec des composants React |
.prisma |
Prisma Schema | Base de données / ORM | Définition des modèles de base de données et des relations |
.graphql / .gql |
GraphQL Query/Schema | APIs / GraphQL | Définition des schémas d'API et des requêtes de données |
1. Le Web haute performance (.wasm, .wat)
WebAssembly (WASM) permet au code écrit dans des langages comme C++, Rust ou Go de s'exécuter dans le navigateur à des vitesses proches du natif.
- WASM : Un fichier binaire exécuté par le navigateur. Vous ne le modifiez pas directement.
- WAT : Le format texte lisible par l'homme de WASM. Il ressemble à du Lisp (beaucoup de parenthèses) et est utilisé pour l'inspection manuelle ou pour apprendre comment fonctionne WebAssembly.
2. TypeScript et React (.d.ts, .tsx, .jsx)
À mesure que le Web s'est orienté vers une interface utilisateur « basée sur les composants », de nouveaux formats ont été nécessaires pour mélanger des balises de type HTML avec la logique JavaScript/TypeScript.
- JSX / TSX : Utilisé par React et des frameworks similaires. Il vous permet d'écrire des balises
<div>directement à l'intérieur de vos fonctions. - D.TS : Ce sont des fichiers de « déclaration ». Ils ne contiennent aucun code exécutable ; ils indiquent simplement au compilateur TypeScript quelles fonctions et variables existent dans une bibliothèque JavaScript, vous offrant ainsi une meilleure autocomplétion (IntelliSense).
3. Composants de frameworks modernes (.vue, .svelte, .astro)
De nombreux frameworks modernes utilisent des Composants monofichiers (SFC), où le HTML, le CSS et la logique pour un élément d'interface utilisateur spécifique cohabitent dans un seul fichier.
- Vue & Svelte : Utilisent des extensions spécifiques pour leur logique de composants.
- Astro : Un framework plus récent (qui propulse ce site même !) qui vous permet d'utiliser ensemble des composants de n'importe quel autre framework (React, Vue, Svelte).
4. Schémas de base de données et d'API (.prisma, .graphql)
À mesure que les applications deviennent plus complexes, nous avons besoin de langages dédiés pour définir la structure des données et la manière dont elles sont interrogées.
- Prisma : Une boîte à outils de base de données moderne. Vous définissez vos tables et vos relations dans un fichier
.prisma, et il génère automatiquement la base de données pour vous. - GraphQL : Une alternative aux API REST. Les fichiers
.graphqldéfinissent le « Schéma » (quelles données sont disponibles) et les « Requêtes » (exactement quelles données vous souhaitez récupérer).
5. Débogage et documentation (.map, .mdx)
- Source Maps (.map) : Lorsque vous déployez du code, il est généralement « minifié » en une seule ligne illisible pour gagner de la place. Un fichier
.mapindique au débogueur de votre navigateur exactement quelle ligne du code source original correspond à la ligne minifiée, ce qui permet de déboguer votre application en production. - MDX : Le meilleur des deux mondes — il vous permet d'écrire du Markdown standard mais d'importer et d'utiliser des composants React à l'intérieur du document. Parfait pour une documentation technique interactive.
Questions fréquentes (FAQ)
Q : Pourquoi ne puis-je pas exécuter un fichier .wasm directement ?
R : WASM est un format de bas niveau conçu pour être exécuté par une machine virtuelle (généralement à l'intérieur d'un navigateur web ou d'un environnement d'exécution comme Wasmtime). Il a besoin d'un environnement « hôte » pour gérer la mémoire et les entrées/sorties.
Q : Dois-je commiter les fichiers .map dans mon dépôt Git ?
R : En général, non. Les source maps sont générées pendant le processus de build. Cependant, vous devriez les télécharger sur votre service de suivi des erreurs (comme Sentry) afin de pouvoir voir des traces de pile lisibles lorsque des erreurs surviennent.
Q : Quelle est la différence entre .gql et .graphql ?
R : Il n'y a aucune différence technique. Les deux sont utilisés pour les schémas et les requêtes GraphQL. La plupart des plugins IDE reconnaissent les deux de la même manière.
Outils associés sur Tool3M
- Formateur JSON : Utile pour inspecter les données JSON renvoyées par vos requêtes GraphQL.
- Minificateur de code : Compressez votre code et générez des source maps pour de meilleures performances.