Webpack Encore

Introduction

Il est habituel d’utiliser le langage CSS pour définir le style d’une page HTML et le langage JavaScript pour définir ce qu’on appelle la programmation événementielle. La programmation événementielle permet d’exécuter des fonctions lorsqu’un évènement provoqué par l’utilisateur arrive (par exemple, quand il clique sur un bouton, une pop-up s’ouvre).

Ces deux langages ont un inconvénient majeur pour les développeurs : ils ne possèdent pas les mêmes outils et la même logique qu’un langage de programmation « standard » comme PHP, ce qui rend leur utilisation parfois difficile pour des développeurs PHP.

Par exemple, la notion de variable, de fonction ou d’objet n’existe pas en CSS.

En JavaScript, la notion de classe d’objet est implémentée uniquement à partir de la norme ECMAScript 6 qui n’est pas supportée par les anciens navigateurs.

Cela peut vous paraître un détail, mais c’est un véritable handicap pour développer de grosses applications.

C’est pourquoi sont arrivés de nouveaux langages, qui ont la structure et les outils d’un langage de programmation et qui, en étant transpilés, peuvent générer respectivement du CSS et du JavaScript. On appelle parfois ces langages, des préprocesseurs.

Les langages les plus utilisés sont :

Utilisation de Sass

Pour utiliser Sass, ajoutons les packages nécessaires :

npm install sass-loader node-sass --dev 

Vous verrez alors que Sass est présent dans le fichier packages.json.

La configuration de la transpilation via WebPack Encore se fait dans le fichier webpack.config.js (fichier qui se trouve à la racine de l’application).

Pour pouvoir intégrer Sass à Symfony, ouvrez ce fichier et décommentez la ligne (enlever le // devant) :

 .enableSassLoader() 

Décommentez également, pour utiliser le préprocesseur Sass, la ligne (si ce n’est déjà fait) :

  .addEntry('app', './assets/js/app.js') 

Cette ligne indique le point d’entrée de la transpilation.

Vous trouverez également un fichier par défaut assets/app.js, dans l’arborescence de votre application.

Il contient ce code :

/* 
 * Welcome to your app's main JavaScript file! 
 * 
 * We recommend including the built version of this JavaScript file 
 * (and its CSS file) in your base layout (base.html.twig). 
 */ 
 
// any CSS you import will output into a single css file (app.css 
in this case) 
import './styles/app.css'; 
 
// start the Stimulus application 
import './bootstrap'; 

La ligne :

import '../styles/app.css'; 

indique que c’est ce fichier app.js qui va importer le CSS à partir du fichier app.css qui se trouve dans le dossier styles. Ce qui nous intéresse, c’est d’importer un fichier Sass et non un fichier CSS, puisque nous voulons utiliser le langage Sass. Les fichiers Sass ont tous le suffixe : .scss.

Il faut donc modifier cette ligne pour importer un fichier app.scss :

import '../styles/app.scss'; 

Bien sûr, il faut créer le fichier app.scss dans le dossier assets/styles.

Et à l’intérieur, il ne reste plus qu’à mettre le code que l’on souhaite en utilisant le langage Sass.

Pour connaître tout sur le langage Sass, vous pouvez...

Utilisation de Vue.js

Pour utiliser le framework Vue.js, il faut tout d’abord installer ses packages :

npm install vue-loader vue vue-template-compiler --dev 

Il faut activer Vue.js dans le fichier Webpack.config.js.

Ajoutez-y la ligne .enableVueLoader() à la fin, juste avant l’instruction enableSassLoader().

Ça donne ceci :

.enableVueLoader() 
    // enables Sass/SCSS support 
.enableSassLoader(); 
module.exports = Encore.getWebpackConfig(); 

Le but n’est pas ici d’apprendre comment fonctionne le framework Vue.js. Pour plus d’informations là-dessus, il vous est suggéré de vous référer au site : https://vuejs.org

Nous allons juste, pour prendre un petit exemple, créer un petit programme Vue.js qui affiche un compteur.

Modifiez le fichier assets/app.js :

import './styles/app.scss'; 
import './bootstrap'; 
import { createApp } from 'vue' 
 
createApp({ 
  data() { 
    return { 
      compteur: 0 
    } 
  } 
}).mount('#app') 

Le composant Vue sera associé à une <div id="app"> dans le code HTML. Vous remarquerez que c’est ici que nous importons le fichier app.scss, le fichier app.js étant...

Utilisation de app.css et app.js dans les vues

Maintenant que tout est transpilé, nous allons pouvoir utiliser notre CSS et notre JavaScript, dans nos pages. Il suffit de lier les fichiers public/build/app.css et public/build/app.js dans notre template de base : base.html.twig.

En réalité, il n’y a rien à faire de plus. Ces fichiers sont automatiquement ajoutés grâce aux instructions :

{{ encore_entry_link_tags('app') }} // pour app.css 
{{ encore_entry_script_tags('app') }} // pour app.js 

qui sont par défaut présentes dans le fichier base.html.twig.

Pour tester le code de Vue.js du compteur, nous allons ajouter dans la page hello.html.twig, le code suivant :

{% verbatim %} 
    <div id="app"> 
  <button @click="compteur++"> 
    Le compteur est à {{ compteur }} 
  </button> 
  {% endverbatim %} 

Vous remarquez des instructions de bloc Twig : {% verbatim %}{% endverbatim %}. En effet, Vue.js utilise les mêmes double accolades ({{ compteur}}) pour définir ses variables que Twig. Pour éviter que Twig ne cherche une variable compteur qui ne lui appartient pas, nous encapsulons l’instruction...