Le composant AssetMapper, introduit dans la version 6.3 de Symfony, permet une gestion sans bundler des assets (images,Css, Javascript).

AssetMapper, qui ne nécessite que Php, simplifie de nombreux projets, en remplaçant Webpack (WebpackEncore), outil parfois inutilement complexe pour gérer les assets.

Installation

composer require symfony/asset-mapper symfony/asset symfony/twig-packs

Cela créera les 4 fichiers suivants :

• assets/app.js Votre fichier javascript principal;
• assets/styles/app.css Votre fichier CSS princpale;
• config/packages/asset_mapper.yaml La où vous configurez le chemin de vos assets;
• importmap.php Votre fichier de confuguration importmap.

Cela mettra à jour votre fichier templates/base.html.twig :

• {% block javascripts %} {% block importmap %}{{ importmap('app') }}{% endblock %} {% endblock %}

Exemple avec l'import de Bootstrap

php bin/console importmap:require bootstrap

Cela mettra à jour votre fichier importmap.php 

// importmap.php
return [
    'app' => [
        'path' => './assets/app.js',
        'entrypoint' => true,
    ],
    'bootstrap' => [
        'version' => '5.3.8',
    ],
];

Pour récupérer les Css de Bootstrap :

php bin/console importmap:require bootstrap/dist/css/bootstrap.min.css

Cela mettra à jour votre fichier importmap.php 

// importmap.php
return [
    'app' => [
        'path' => './assets/app.js',
        'entrypoint' => true,
    ],
    'bootstrap' => [
        'version' => '5.3.0',
    ],
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.8',
        'type' => 'css',
    ],
];

Il ne reste plus qu'à mettre à jour votre fichier app.js :

// assets/app.js
import './bootstrap.js';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');