Explorer Vite via son code source

Vite, l'outil de construction innovant d'Evan You, est l'agnostique du framework, soutenant Vue.js, React.js, Svelte.js et JavaScript Plain. Cet article dépasse une vue d'ensemble au niveau de la surface, explorant le code source de Vite pour comprendre son modèle et ses systèmes de plugin. Nous allons clarifier les distinctions entre les modèles et les plugins et examiner comment VITE's Core interagit avec les plugins.

Concepts clés:

• L'indépendance du framework de Vite découle de son modèle et de l'architecture du plugin, permettant la génération de projet dans divers cadres.
• Vite Tiveages Rollup pour le regroupement primaire et l'esbuild pour la compatibilité et l'optimisation des modules, résultant en une vitesse exceptionnelle.
• La création d'un projet VITE consiste à sélectionner un nom et un modèle de projet à l'aide de l'outil create-vite. Les modèles spécifiques au framework reposent sur les plugins correspondants, construits à l'aide d'une architecture à crochet.

Construire une application Vue avec Vite:

Pour illustrer, créons un projet Vue:

npm init vite@latest

(en utilisant @latest garantit que vous avez toujours la dernière version.) Alternativement, utilisez la sténographie:

npx create-vite

Cela lance create-vite, vous invitant à un nom et un modèle de projet. Choisissez un nom et sélectionnez "Vanilla" ou "Vue" comme modèle.

Exploration du code source Vite:

Accédez au référentiel GitHub de Vite (github.com/vitejs/vite) et examinez le répertoire packages. create-app (déprécié) et create-vite sont essentiels. create-vite abrite les modèles de projet intégrés. Vous trouverez également des répertoires de plugins pour les plugins intégrés.

Modèles vs plugins:

• Modèles: Code de démarrage pour les nouveaux projets. Situés à l'intérieur packages/create-vite, ils fournissent des structures de fichiers spécifiques au framework (par exemple, template-vue, template-vanilla).

• Plugins: Activer l'agnosticisme du framework de Vite. Trouvé dans le répertoire packages (par exemple, plugin-vue, plugin-react), ils gèrent le traitement spécifique au framework.

Les modèles

utilisent souvent des plugins. Par exemple, le modèle VUE nécessite le plugin @vitejs/plugin-vue pour gérer les composants VUE (SFCS).

comparer package.json fichiers pour template-vanilla et template-vue révèle cette dépendance:

template-vue inclut vue, @vitejs/plugin-vue, et @vue/compiler-sfc, permettant la prise en charge de Vue. @vitejs/plugin-vue agit comme le pont entre Vite's Core et Vue.js.

Le plugin Vue:

@vitejs/plugin-vue gère le regroupement du projet Vue, déléguant à Rollup via des crochets. Ces crochets définissent les points où le code du plugin s'exécute.

Un extrait de packages/plugin-vue/src/index.ts montre des implémentations de crochet:

npm init vite@latest

VITE'S CORE (par exemple, packages/vite/src/node/build.ts) utilise Rollup, incorporant ces plugins.

Rollup vs Esbuild:

Vite utilise à la fois Rollup (regroupement principal) et ESBUILD (transformation et optimisation du module - "Dépendance pré-bundling"). La vitesse d'Esbuild dans GO le rend idéal pour cette tâche critique des performances.

Résumé:

Cette exploration révèle l'architecture de Vite: create-vite gère les modèles; Les plugins spécifiques au framework, à l'aide d'un système basé sur le crochet, s'intègrent au noyau de Vite via Rollup, avec Esbuild Optimizing le module Manipulation. Cette combinaison offre la vitesse et la flexibilité de Vite.

Questions fréquemment posées (FAQ):

(Les FAQ d'origine sont déjà bien écrites et complètes. Aucune modification n'est nécessaire.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!