Tuto pour mettre en place un projet typeScript avec ViteJS

Vite est un outil de développement qui permet de délivrer du code front-end en utilisant les modules EcmaScript natif. Au lieu de générer un "bundle" à chaque modification d'un fichier pendant la phase de développement, ViteJS utilise le support des imports natifs en créant un serveur personnalisé (basé sur koa) qui va délivrer des fichiers JS compatibles avec votre navigateur web. Résultat des courses, ViteJS annonce une vitesse x10-x100 par rapport à des outils comme webPack ou consœur.

1. Se mettre dans le dossier qui contient vos projets de developpements workspaceDev puis : pnpm create vite puis répondre aux questions ou bien directement pnpm create vite nomDuProjet -- --template vanilla-ts . Cela va créer un nouveau dossier projet.
2. Aller dans le dossier projet.
3. Installer les modules (typescript, esbuild, rollup, etc.) : pnpm install.
4. Lancer un serveur de dev : pnpm dev ou bien pnpm run dev.
5. Aller sur http://localhost:3000/ pour visualiser en hot reload son travail. Ainsi, pas besoin d'utiliser l'extension Live Server.
6. Coder :)
7. Quand ce sera le moment de distribuer votre travail : Produire une distribution : pnpm build ou pnpm run build.
8. Pour l'instant, je ne connait pas la différence entre vite et vite preview

Remarque : les noms des scripts se trouvent dans le fichier package.json :

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
    }