L’article propose une solution pour tester efficacement le JavaScript dans Symfony Asset Mapper, souvent confronté à des erreurs comme ERR_MODULE_NOT_FOUND en raison de l’incompatibilité entre l’importmap.php de Symfony et les outils Node.js. L’auteur suggère d’utiliser des liens symboliques pour faire correspondre les fichiers Symfony (dans assets/vendor ou vendor) avec la structure attendue par Node.js dans node_modules, évitant ainsi de dupliquer ou modifier les imports.
Un script PHP automatise la création de ces liens symboliques en analysant l’importmap.php, permettant à Node.js de résoudre les modules comme en production. Cette méthode s’intègre via un pretest dans le package.json, exécutant le script avant chaque test. L’approche privilégie le test runner natif de Node.js (depuis la version 20) pour sa simplicité, sa rapidité et son absence de configuration complexe, tout en testant les fichiers réels utilisés en production.
Symfony propose AssetMapper, une solution radicalement simple pour gérer les assets (JS, CSS, images) sans recourir à Node.js ou à des outils de build complexes comme Webpack. Basé sur la technologie native des navigateurs importmap, AssetMapper permet d’utiliser directement les imports ES6 dans le navigateur, sans étape de compilation. Il génère automatiquement une balise <script type="importmap"> qui mappe vos dépendances et vos fichiers locaux, et gère le versionnage des assets pour un cache busting efficace. L’installation se fait via Composer, et une simple commande (bin/console importmap:require) suffit pour ajouter une bibliothèque JS, qui est ensuite téléchargée depuis un CDN et stockée localement. En production, une commande (asset-map:compile) copie et versionne les fichiers dans public/assets/, avec option de pré-compression Gzip. Pour la minification, le bundle sensiolabs/minify-bundle s’intègre parfaitement. Résultat : zéro build, zéro npm, et une gestion des assets simplifiée et performante, idéale pour les applications Symfony classiques ou utilisant Hotwire/Stimulus. Une approche minimaliste et efficace pour ceux qui veulent éviter la complexité du frontend moderne.
L'article explique comment installer DaisyUI dans un projet Symfony en utilisant le composant AssetMapper. Il montre aussi comment choisir la version de Tailwind (version 4)
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre