Configurer Vite pour un projet existant et servi par un back-end

Aujourd'hui, je m'occupe de l'installation de vite.js dans un projet existant et qui utilise Flask. Je n'ai pas d'index.html comme c'est le cas dans tous les exemples de démarrage et je ne suis pas sur Laravel donc je n'ai pas l'intégration déjà toute faite. On va donc tout faire tout seul !

Installation

Pour commencer, il faut ajouter vite à son package.json :

npm install --save-dev vite

Comme j'utilise vue, j'ai besoin d'un plugin en plus. Si vous utilisez autre chose, vous aurez probablement un plugin approprié indiqué dans la documentation.

npm install --save-dev @vitejs/plugin-vue

On peut déjà ajouter les scripts nécessaire à l'utilisation de vite dans le package.json.

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  }

Configuration de vite

La configuration se fait dans un fichier vite.config.js à la racine de votre projet.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
});

Pour que ça fonctionne correctement, on va devoir indiquer à vite qu'on veut utiliser le plugin vue.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
});

Si vous avez un index.html, vous avez terminé votre configuration. Sinon, c'est là que les choses sérieuses commencent. L'objectif premier est de lui indiquer l'emplacement du fichier à utiliser comme point de départ.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    build: {
        rollupOptions: {
            input: "my-project/index.js",
        }
    }
});

Si vous lancez vite avec npm run build, vous allez vous retrouver avec un retour comme celui-ci.

 npm run build

> my-project@1.0.0 build
> vite build

vite v3.2.3 building for production...
✓ 5 modules transformed.
dist/assets/index.f35b6b7b.js   4.12 KiB / gzip: 1.66 KiB

f35b6b7b c'est ce qu'on appelle un hash. Une chaine de caractères générés automatiquement à partir du contenu du fichier pour forcer le nom à changer si le contenu change. Si vous voulez conserver ce fonctionnement avec votre projet back-end, vous pouvez demander la génération d'un manifest.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    build: {
        manifest: true,
        rollupOptions: {
            input: "my-project/index.js",
        }
    }
});

En plus de votre fichier js, vous allez avoir un manifest.json qui contient un mapping entre le nom que vous connaissez de vos fichiers et le nom autogénéré. Voici un exemple pour mieux comprendre.

{
  "my-project/index.js": {
    "file": "assets/index.f35b6b7b.js",
    "src": "my-project/index.js",
    "isEntry": true
  }
}

Comme ça, depuis votre back-end vous pouvez lire le manifest et inclure le bon nom de fichier.

Sinon, l'autre possibilité c'est de ne pas faire de hash ni de manifest ! Dans ce cas, au lieu de demander un manifest à vite, on va demander à rollup de changer le nom du fichier de destination.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    build: {
        rollupOptions: {
            input: "my-project/index.js",
            output: {
                entryFileNames: `assets/[name].js`,
                chunkFileNames: `assets/[name].js`,
                assetFileNames: `assets/[name].[ext]`
            }
        }
    }
});

Et là on y est 👏🏻. On a vite qui est configuré et on a un fichier dont on a toujours le même nom qu'on va pouvoir importé tel quel dans notre HTML !