LE COMPOSANT ASSET MAPPER

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

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.

Nous verrons comment installer les packages nécessaires et les configurer  à travers l'exemble de l'installation de Bootstrap dans un projet.

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! 🎉');

Bootstrap est installé dans votre projet et vous pouvez ajouter d'autres Bibliothèques Javascript( Tailwind, AOS...) avec le Asset Mapper. N'hésitez pas à consulter le site de Symfony UX pour aller plus loin.

Pour en savoir plus,

Pour en savoir plus, la documentation officielle, c'est ici 

La suite ...