Intégration du back-end #

1. Dans votre configuration Vite, configurez l’entrée et activez le manifeste de compilation :

   // vite.config.js
   export default defineConfig({
     build: {
       // génère le manifest.json dans outDir
       manifest: true,
       rollupOptions: {
         // remplace l’entrée .html par défaut
         input: '/path/to/main.js'
       }
     }
   })
   

   Si vous n’avez pas désactivé le polyfill de module preload, vous devrez aussi l’importer dans votre entrée

   // ajoutez au début de votre entrée d’application
   import 'vite/modulepreload-polyfill'
   

2. Pour le développement, injectez ce qui suit dans le template HTML de votre serveur (remplacez http://localhost:3000 par l’URL locale sur laquelle Vite est exposé) :

   <!-- si en mode développement -->
   <script type="module" src="http://localhost:3000/@vite/client"></script>
   <script type="module" src="http://localhost:3000/main.js"></script>
   

   Assurez-vous également que le serveur soit configuré pour servir les ressources statiques du répertoire de Vite, sinon les ressources comme les images ne seront pas chargées correctement.

   Notez que si vous utilisez React avec @vitejs/plugin-react, vous devrez aussi ajouter ceci avant le script ci-dessus, puisque le plugin ne peut pas modifier le HTML que vous servez :

   <script type="module">
     import RefreshRuntime from 'http://localhost:3000/@react-refresh'
     RefreshRuntime.injectIntoGlobalHook(window)
     window.$RefreshReg$ = () => {}
     window.$RefreshSig$ = () => (type) => type
     window.__vite_plugin_react_preamble_installed__ = true
   </script>
   

3. Pour la production : après que vous ayez lancé vite build, un fichier manifest.json sera généré en plus des autres fichiers de ressources. Un fichier de manifeste ressemble à ceci :

   {
     "main.js": {
       "file": "assets/main.4889e940.js",
       "src": "main.js",
       "isEntry": true,
       "dynamicImports": ["views/foo.js"],
       "css": ["assets/main.b82dbe22.css"],
       "assets": ["assets/asset.0ab0f9cd.png"]
     },
     "views/foo.js": {
       "file": "assets/foo.869aea0d.js",
       "src": "views/foo.js",
       "isDynamicEntry": true,
       "imports": ["_shared.83069a53.js"]
     },
     "_shared.83069a53.js": {
       "file": "assets/shared.83069a53.js"
     }
   }
   

   • Le manifeste a une structure au format Record<nom, morceau>.
   • Pour les morceaux (chunks) d’entrée, la clé est le chemin relatif du src depuis la racine projet.
   • Pour les morceaux qui ne sont pas d’entrée, la clé est le nom de base du fichier généré préfixé par _.
   • Les morceaux contiendront des informations sur leurs imports statiques et dynamiques (les deux sont des clés qui renvoient vers le morceau correspondant dans le manifeste), et aussi sur le CSS qui leur est associé (s’il y en a).

   Vous pouvez utiliser ce fichier pour rendre des liens ou des directives de pré-chargement (preload directives) de fichiers hachés (note : la syntaxe ci-dessous est pour l’exemple, remplacez-la par votre langage de templating côté serveur) :

   <!-- si en mode production -->
   <link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
   <script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>