Evan toi, le créateur du framework frontal Vue.js, a récemment publié un nouvelle itération principale de Vite, un outil de construction qui se concentre sur la vitesse de construction et les courtes boucles de rétroaction. Rapide 2.0 est une refactorisation complète de la version précédente autour d’un noyau indépendant du framework. Vite 2.0 a un nouveau format de plugin et une API de programmation améliorée qui sont censées faciliter la création de nouveaux outils sur Vite.

Vous avez décrit la nouvelle version de Vite comme suit:

Vite (mot français pour «rapide», prononcé /vit/) est un nouveau type d’outil de création pour le développement Web frontal. Pensez à une combinaison préconfigurée de serveur de développement et de bundler, mais plus légère et plus rapide.
[…] Vite 2.0 apporte de nombreuses améliorations par rapport à son incarnation précédente.

Vite 2.0 est désormais indépendant du framework. Les cadres sont pris en charge via des plugins, un Un certain nombre d’entre eux sont déjà disponibles (par exemple pour vue, Réagissez, Préparer, LitElement). UNE Svelte Le plugin est en cours d’élaboration.

Vite nécessite une version du Node.js qui est égal ou après 12.0.0. Les cadres de projet pour un démarrage rapide peuvent être créés via la ligne de commande. La commande suivante crée un projet Vite qui utilise le framework frontal Preact:


npm init @vitejs/app my-preact-app --template preact

Vite 2.0 en a un nouveau format de plugin cela étend l’interface du plugin de Rollup. L’extension roll-up signifie que le nouveau système de plug-ins de Vite est compatible avec de nombreux plug-ins existants. Une liste de les plugins de rollup compatibles sont maintenus en ligne. La liste comprend des plugins couramment utilisés tels que boucle (analyse de code statique), photo (Import de fichiers image), remplacer (remplace les chaînes dans les fichiers lors du regroupement), GraphQL (convertit les fichiers GraphQL en modules ES6) et plus encore.

UNE Plug-in de cumul est un objet avec un ensemble de Propriétés, Construire des crochets, et Crochets de génération de sortie qui configurent le comportement du bundler à certains moments de son traitement. Un plugin de rollup compatible Vite qui prend en charge transforme (pré-processus) les types de fichiers définis par l’utilisateur est aussi simple que:


const fileRegex = /.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null 
        }
      }
    }
  }
}

décès et Jake Archibald précédemment loué la simplicité de l’interface du plug-in roll-up dans une conférence (Travail rapide dans le monde des outils de construction) à JSConf Budapest. Archibald crédité 16 plugins de cumul personnalisés que vous pouvez utiliser pour implémenter de nombreuses optimisations de performances:

Vous avez peut-être le sentiment que nous nous opposons beaucoup à Webpack ici. Vous avez raison, nous avons raison. La vérité honnête est que la différence que nous avons ressentie entre travailler sur un projet avec Webpack et travailler sur un projet avec Rollup était réelle, réelle pour nous tous les jours. Non seulement nous sentions que nous comprenions ce qui se passait, mais nous nous sentions également capables de changer ce qui se passait si nécessaire.

Les plugins Vite ne peuvent utiliser que des hooks compatibles roll-up. Vous pouvez également utiliser des hooks et des propriétés spécifiques à Vite (configResolved, configureServer, transformIndexHtml, handleHotUpdate) pour personnaliser le comportement de l’invite uniquement – gestion personnalisée du rechargement des modules à chaud, de la configuration différentielle, etc.

Vite 2.0 s’inspire en partie d’une nouvelle suite d’outils conçus pour permettre une expérience de développement plus productive dans les navigateurs modernes. le a récemment publié Snowpack 3 annonce un temps de construction inférieur à 50 ms, quelle que soit la taille de la base de code; et les importations en continu. Snowpack sera utilisé dans le prochain framework d’application de Svelte SvelteKit et le générateur de site statique du microsite. Preacts WMR a été le pionnier de l’utilisation de l’interface de plug-in roll-up pour réutiliser un grand nombre de plug-ins roll-up renforcés. Les développeurs peuvent s’identifier à vous Comparaison de Vite vs Snowpack et WMR.

Vite 2.0 offre également un support CSS de première classe (avec réalignement d’URL et partage de code CSS) ainsi qu’un support de rendu côté serveur (expérimental), et Prise en charge des navigateurs plus anciens avec opt-in.

La documentation de Vite est Disponible en ligne et inclut le pré-regroupement des dépendances, la gestion des actifs statiques, les packages de production, le rendu côté serveur, l’intégration back-end, et bien plus encore. Vite est distribué sous la licence open source MIT. Les contributions sont les bienvenues et doivent Suivez le guide de Vite.





Source link

Recent Posts