Ajout de Vite à votre application Web existante

Vite, prononcé "Veet", est un bundler javascript moderne renommé pour sa vitesse et sa facilité d'utilisation. Il s'agit d'un outil puissant nécessitant une configuration minimale, tout en offrant des options de personnalisation approfondies. Cet article détaille la migration d'un projet existant d'un autre Bundler (comme WebPack) à Vite. Pour de nouveaux projets, reportez-vous à la documentation officielle VITE. Même pour les migrations héritées, l'échafaudage d'un projet simple Vite est d'abord recommandé pour une meilleure compréhension de sa structure.

Migration de WebPack à Vite

Ce guide reflète l'expérience de la migration d'un projet WebPack substantiel de longue date. Le processus met en évidence les capacités de configuration de Vite pendant la transition.

Configurations de webpack inutiles en vite

VITE gère intrinsèquement de nombreuses tâches nécessitant généralement des configurations WebPack approfondies. Cela élimine le besoin de nombreux plugins et paramètres de webpack communs.

Manipulation statique des actifs

WebPack nécessite souvent une configuration explicite pour charger des actifs statiques (images, polices, etc.):

 {
  test: /\.(png|jpg|gif|svg| eot|woff|woff2|tf)$/,
  utiliser: [
    {
      chargeur: "chargeur de fichiers"
    }
  ]]
}

Vite gère cela automatiquement.

Style (CSS / SCSS)

La configuration de style de WebPack peut être complexe:

 {
  tester: /\.s?css$/,
  Utilisation: [MINICSSEXTRATPLUGIN.loader, "CSS-chargedeur", "Sass-chargedeur"]
},

// plus tard

Nouveau MINICSSEXTRATPLUGIN ({FileName: "[Name] - [ContentHash] .Css"}),

Vite soutient les CSS et les SCS nativement; Installez simplement SASS et Vite gère le reste.

Transpilation (TypeScript / JSX)

WebPack a besoin de transpilation pour TypeScript et JSX:

 {
  test: /\.(t|j)sx?$/,
  exclure: / node_modules /,
  chargeur: "babel-chargedeur"
},

... avec une configuration Babel correspondante. VITE gère cette boîte à l'emploi, prenant en charge les fonctionnalités JavaScript modernes et les dactylographiques. Un plugin est disponible pour l'ancien support du navigateur.

Résolution des modules de nœud

WebPack nécessite une configuration explicite pour résoudre node_modules :

 résoudre: {
  modules: [path.resolve ("./ node_modules")]
}

Vite le gère automatiquement.

Modes de production / développement

WebPack utilise souvent mode pour différencier les environnements:

 Mode: isProd? "Production": "développement",

VITE utilise des commandes distinctes ( vite for Development, vite build for Production).

Extensions de fichiers

WebPack nécessite souvent de spécifier les extensions de fichier:

 résoudre: {
  Extensions: [".ts", ".tsx", ".js"],
}

Vite gère automatiquement les extensions communes.

Compatibilité du plugin Rollup

De nombreux plugins Rollup sont compatibles avec VITE, offrant une transition en douceur pour les plugins existants. Consultez la documentation VITE pour les informations de compatibilité.

Configuration de votre premier projet Vite

Pour migrer un projet existant, commencez par un point d'entrée HTML (par exemple, index.html ) référençant votre fichier de saisie JavaScript. Installez les plugins nécessaires (par exemple, @vitejs/plugin-react pour les projets React). Créer un fichier vite.config.ts :

 import {DefinConfig} de "Vite";
Importer React à partir de "@ vitejs / plugin-react";

Exporter de défaut DefiConfig ({
  Plugins: [react ()]
});

Ajouter des scripts NPM:

 "Dev": "Vite",
"Build": "Vite Build",
"Aperçu": "Vite Aperçu",

Démarrez le serveur de développement avec npm run dev .

Configuration avancée: alias, variables d'environnement et proxies

Alias

Les alias WebPack peuvent être reproduits en Vite en utilisant resolve.alias :

 résoudre: {
  alias: {
    jscolor: path.resolve ("./ util / jscolor.js"),
    app: path.resolve ("./ app"),
    // ... plus d'alias
  }
},

Variables d'environnement

Vite utilise import.meta.env pour les variables d'environnement, généralement préfixées avec VITE_ . Pour les projets hérités, un plugin personnalisé peut être nécessaire pour gérer process.env existant.

Proxing du serveur

Pour les demandes de proxie pour les services backend pendant le développement:

 serveur: {
  proxy: {
    "/ graphQL": "http: // localhost: 3001"
  }
}

Bibliothèques de construction

Pour la construction de bibliothèques, configurez l'option build dans vite.config.ts : (Exemple omis pour brièveté, mais similaire à l'exemple d'origine)

Conclusion

Vite offre une amélioration significative du développement d'applications Web, offrant une vitesse et une facilité d'utilisation. Ses fonctionnalités et sa compatibilité avec les plugins Rollup rendent la migration des projets existants relativement simples.

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!