Le guide de l'outillage de projet moderne et ultra-rapide

Vite est un outil moderne et ultra-rapide pour les projets d'échafaudage et de regroupement, devenant rapidement populaire en raison de la compilation de code quasi-instantanée et du remplacement rapide des modules à chaud. Dans cet article, vous apprendrez ce qu'est Vite et comment échafauder un nouveau projet avec, et plus encore.

La façon dont les nouveaux projets sont créés aujourd'hui diffère considérablement de la façon dont nous créions des projets il y a des années. Dans le passé, la méthode habituelle consistait à créer un dossier et à commencer par créer un tas de fichiers HTML, CSS et JS. Les projets ont été déployés manuellement à l'aide de clients FTP et les fichiers ont été téléchargés tels quels, sans aucun traitement ni optimisation comme la réduction ou la compression.

Au fil des ans, les choses ont changé, car nous avons maintenant de nombreux outils incroyables comme Babel et webpack qui nous a facilité la vie en tant que développeurs. Et nous devons garder un œil attentif sur l'écosystème car il évolue rapidement. Dans le développement Web, un nouvel outil est apparu l'année dernière qui offre une alternative à Create React App (CRA) et gagne rapidement en popularité. Appelé Vite (Vite.js), son créateur le décrit comme un « outil frontal de nouvelle génération ». Aujourd'hui, nous allons explorer leur prétention à la gloire et voir comment vous pouvez utiliser Vite au lieu de CRA, et pourquoi !

De nos jours, de nombreux projets sont lancés en utilisant des outils CLI riches en fonctionnalités qui fournissent une configuration standard avec des fonctionnalités telles que comme transpilation de code et optimisations utiles ou un serveur de développement avec remplacement de module à chaud prêt à l'emploi.

De nombreux frameworks populaires fournissent des CLI officielles qui peuvent être utilisées pour échafauder des projets. Par exemple, React a Create React App, tandis que Vue a Vue CLI. Cependant, il existe d'autres concurrents dans cet espace qui ne sont pas nécessairement spécifiques au cadre. C'est pourquoi Vitel'outil indépendant du framework pour l'échafaudage et la construction de projets modernes, mérite notre attention. Alors, poursuivez votre lecture au fur et à mesure que nous découvrons Vite.js et assurons-nous de rester dans l'air du temps.

React devient plus facile lorsque vous avez un expert à vos côtés. KendoReact est une bibliothèque de composants d'interface utilisateur professionnelle qui a pour mission de vous aider à concevoir et à créer des applications professionnelles avec React beaucoup plus rapidement. Découvrez-le !

Table des matières

Vous pouvez trouver les exemples de code pour cet article ici.

À quoi sert Vite ?

Vite, qui a été créé par Evan You, le créateur du framework Vue.js, est un outil frontal de nouvelle génération qui fournit un serveur de développement ultra-rapide, un regroupement et une excellente expérience de développement. Quand je dis rapide, je le pense vraiment, car les temps de démarrage peuvent décupler par rapport à d'autres outils, tels que webpack, Rollup ou Parcel.

Qu'est-ce qui rend Vite.js rapide ?

Vite tire parti du natif Modules ES, qui sont pris en charge dans les navigateurs toujours verts. Dans l'environnement de développement, Vite exécute un serveur qui est utilisé pour compiler et servir à la volée toutes les dépendances requises via les modules ES. Cette approche permet à Vite de traiter et de fournir uniquement le code nécessaire à ce moment-là. Ainsi, Vite doit gérer beaucoup moins de code lors du démarrage du serveur et des mises à jour du code. Ce n'est pas le cas pour d'autres outils, tels que webpack. Nous verrons pourquoi c'est dans un instant.

Une autre raison pour laquelle Vite est si rapide est qu'il utilise esbuild pour pré-grouper les dépendances pendant le développement. esbuild est un bundler JavaScript extrêmement rapide écrit en langage Go. Ci-dessous, vous pouvez voir la comparaison de la façon dont esbuild fairs par rapport à d'autres bundlers, tels que webpack, Rollup et Parcel, qui ont été écrits à l'aide de JavaScript. rollup + tercer, 37,79 ; Parcelle 2 39,28s ; Webpack 4, 43.07s ; webpack 5, 55,25s. » title= »esbuild Bundlers Comparison »/>

Comme le montre le benchmark, la différence est substantielle. Voyons maintenant en quoi Vite diffère de webpack.

Vite vs. webpack

webpack est l'un des bundles les plus couramment utilisés pour les projets Web, mais il est beaucoup plus lent que Vite. L'utilisation de modules ES natifs donne à Vite un avantage de vitesse significatif par rapport à webpack, qui gère le code et les dépendances de regroupement différemment. webpack regroupe tous les fichiers du projet avant que le serveur de développement ne soit prêt. ="Serveur de développement basé sur un ensemble"/>

C'est l'une des raisons les plus importantes pour lesquelles webpack est beaucoup plus lent, en particulier dans les projets plus importants. À mesure qu'un projet grandit, la quantité de code à traiter augmente également. processus de compilation avec webpack devient de plus en plus long. De même, lors du remplacement du module à chaud lorsque le code est mis à jour, webpack doit effectuer plus de traitement pour mettre à jour le bundle et servir le dernier code pendant le développement. Ce n'est pas le cas pour Vite en raison de l'utilisation de modules ES natifs. Le graphique ci-dessous montre comment Vite traite les fichiers. " title="Ba ESM natif sed dev server"/>

Si nous avons une application avec quelques pages comme home, about, contact, etc., et que nous visitons la page d'accueil, nous n'avons vraiment besoin que du code pour la page d'accueil et c'est ce que nous obtenons avec Vite. webpack traiterait le code pour toutes les pages et servirait ensuite le code pour la page d'accueil.

Voyons maintenant comment nous pouvons échafauder un projet React avec Vite.

Échafaudage d'un projet React avec Vite [19659008]Vite peut être utilisé pour échafauder des projets pour plusieurs frameworks, tels que React, Vue, Svelte, etc. Pour cet exemple, créons une application React. Exécutez l'une des commandes ci-dessous dans votre terminal.

# npm 6.x
npm init vite@latest my-vite-react-app --template react

# npm 7+, un double tiret supplémentaire est nécessaire :
npm init vite@latest my-vite-react-app -- --template réagir

# fil
fil créer vite my-vite-react-app --template réagir

# pnpm
pnpm create vite my-vite-react-app -- --template react

Une fois le projet échafaudé, cd dedans, installez toutes les dépendances et démarrez le serveur de développement.

$ cd my-vite-react-app
$ npm install // ou fil
$ npm run dev // ou thread dev

Par défaut, le serveur de développement démarre sur le port 3000, rendez-vous donc sur http://localhost:3000 dans votre navigateur. Vous devriez voir quelque chose comme :

Comment créer un menu latéral récursif dans React

$ npm install -D sass

.counter {
  background-color: bisque;
}

import "./App.css";
 import Counter from "./components/Counter";

function App() {
  return  (
    <div className="App">
      <Compteur />
    </div>
  );
}

export default App;

import FancyModal from '../../../ ../components/modal/FancyModal/FancyModal.jsx'

import FancyModal from '@/components/modal/FancyModal/FancyModal.jsx'

import  chemin from "path";
import { defineConfig } from "vite";[19659042]import react from "@vitejs/plugin-react";


export default defineConfig({
  plugins : [react()],
  résoudre : {
    alias: {
      "@": chemin.resolve(__dirname, "./src "),
    },
  },
});

{
  "compilerOptions": {[19659184]"baseUrl": "..",
    "chemins": {
      "@/*": [[19659194]"src/*"]
    }
  }
}

import "./App.css";
import Counter from "@/components/Counter" ;

function App() {
  return (
    <div className="App">
      <Compteur />
    </div>
  ) ;
}

export default App;

VITE_MESSAGE=" Bonjour Vite!"

import "./App.css";
import Counter from "./components/Counter.jsx" ;

fonction App() {
  return (
    <div className=[19659041]"App">
      <Compteur />
      {import.meta. env.VITE_MESSAGE}
    </div>
  );
}

export default App ;