Le sujet de cet article est utilisé sur mon projet Github Symfony Basics qui peut servir d'exemple ou de base si nécessaire.
Dans Symfony, par défaut, l'asset mapper charge un entrypoint appelé "app" repertorié dans importmap.php :
...
'app' => [
'path' => './assets/app.js',
'entrypoint' => true,
],
...
Et qui est chargé dans templates/base.html.twig :
{% block importmap %}{{ importmap('app') }}{% endblock %}
Mais que faire si nous voulons utiliser un JS/CSS différent pour une administration ou des pages spécifiques du site ? Il est possible de créer de nouveaux entrypoint pour séparer les choses et ne les charger que là ou on le souhaite.
Création de l'entrypoint
Dans notre cas, partons du principe que le nouveau js sera utilisé pour une administration, dans importmap.php nous allons ajouter en dessous de l'entrée app :
'adm' => [
'path' => './assets/adm.js',
'entrypoint' => true,
],
Le fichier dans 'path' n'existe pas encore, nous allons le créer et l'ouvrir pour ajouter un simple log qui nous aidera à vérifier que tout fonctionne bien :
console.log('adm.js est correctement chargé');
La dernière chose à faire est de l'ajouter au chargement des pages dans le block importmap présenté au début de l'article, il est possible de faire deux choses :
- Ne charger que l'entrypoint adm :
{{ importmap('adm') }} - Charger les entrypoints adm et app ensemble :
{{ importmap(['app', 'adm']) }}
Pour vérifier que tout fonctionne il ne reste plus qu'à lancer la page, ouvrir la console et vérifier que le log est bien présent. Nous pouvons maintenant utiliser plusieurs entrypoints pour répondre aux besoins JS/CSS de notre application web.