Configurations multiples avec Vite 🏗️

Il est possible de combiner plusieurs fichiers de configuration Vite. Voici un modèle de configuration possible.

package.json

{
  "dependencies": {
    "concurrently": "^8",
  },
  "scripts": {
    "dev": "concurrently \"vite -c vite.config1.config.js\" \"vite -c vite.config2.config.js\"",
    "build": "vite build -c vite.config1.config.js && vite build -c vite.config2.config.js"
  }
}

Configuration de Vite

définir 2 fichiers de configuration vite vite.config1.config.js et vite.config2.config.js.

// vite.config1.config.js
import { defineConfig } from 'vite'
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  base: '/build-1/',

  plugins: [
    symfonyPlugin(),
  ],

  build: {
    outDir: 'public/build-1',

    rollupOptions: {
      input: {
        "welcome": "./assets/page/welcome/index.js",
        "theme": "./assets/theme.scss"
      },
    },
  },
});

// vite.config2.config.js
import { defineConfig } from 'vite'
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  base: '/build-2/',

  plugins: [
    symfonyPlugin(),
  ],

  build: {
    outDir: 'public/build-2',
    rollupOptions: {
      input: {
        "other": "./assets/page/other/index.js",
      },
    },
  },
});

Configuration du Bundle

dans votre fichier config/packages/pentatrion_vite.yaml

pentatrion_vite:

    default_config: config1
    configs:
        config1:
            build_directory: build-1
            script_attributes:
                 # vous pouvez définir les attributs que vous souhaitez
                 # appliquer pour toutes vos balises script

            link_attributes:
                 # vous pouvez définir les attributs que vous souhaitez
                 # appliquer pour toutes vos balises lien

        config2:
            build_directory: build-2
            script_attributes:
                # etc

            link_attributes:
                # etc

dans vos modèles

{% block stylesheets %}
    {# definissez le nom de votre config dans le 3e paramètre #}
    {{ vite_entry_link_tags('other', [], 'config2') }}

    {# pas de 3e paramètre, ce sera default_config -> config1 #}
    {{ vite_entry_link_tags('welcome') }}
{% endblock %}

{% block javascripts %}
    {# definissez le nom de votre config dans le 3e paramètre #}
    {{ vite_entry_script_tags('other', [], 'config2') }}

    {# pas de 3e paramètre, ce sera default_config -> config1 #}
    {{ vite_entry_script_tags('welcome') }}
{% endblock %}

pour afficher vos ressources en mode dev

# config/routes/dev/pentatrion_vite.yaml

# supprimer cette configuration par défaut
_pentatrion_vite: 
    prefix: /build
    resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

# ajouter une route par chemin de build
_pentatrion_vite_config1: 
    path: /build-1/{path} #same as your config1 base
    defaults: 
        _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild
        configName: config1
    requirements: 
        path: ".+"

_pentatrion_vite_config2: 
    path: /build-2/{path} #same as your config2 base
    defaults: 
        _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild
        configName: config2
    requirements: 
        path: ".+"

_profiler_vite:
    path: /_profiler/vite
    defaults:
        _controller: Pentatrion\ViteBundle\Controller\ProfilerController::info

Configuration du composant Symfony Asset

Facultatif : si vous souhaitez utiliser le composant Symfony Asset avec une stratégie personnalisée, vous devez ajouter une configuration supplémentaire...

# config/services.yaml
services:
    pentatrion_vite.asset_strategy_config1:
        parent: Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy
        calls:
            - [setConfig, ['config1']]

    pentatrion_vite.asset_strategy_config2:
        parent: Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy
        calls:
            - [setConfig, ['config2']]

# config/packages/framework.yaml
framework:
    assets:
        packages:
            config1:
                # same name as your service defined above
                version_strategy: 'pentatrion_vite.asset_strategy_config1'

            config2:
                version_strategy: 'pentatrion_vite.asset_strategy_config2'

après vous pouvez faire référence à vos ressources comme ceci :

<img src="{{ asset('assets/images/violin.jpg', 'config1')}}" alt="">