Webpack Encore

Introducción

Es habitual utilizar el lenguaje CSS para definir el estilo de una página HTML, y el lenguaje JavaScript, para la programación de eventos. La programación de eventos permite ejecutar funciones cuando ocurre un evento provocado por el usuario (por ejemplo, al hacer clic en un botón, se abre una ventana emergente).

Ambos lenguajes tienen un inconveniente importante para los desarrolladores: no tienen las mismas herramientas ni lógica que un lenguaje de programación «estándar» como PHP, lo que a veces dificulta su uso para desarrolladores de PHP.

Por ejemplo, la noción de variable, función u objeto no existe en CSS.

En JavaScript, la noción de clase de objeto se implementa solo a partir de la norma ECMAScript 6, que no es compatible con los navegadores antiguos.

Esto puede parecer un detalle, pero es una verdadera limitación para desarrollar aplicaciones grandes.

Es por eso por lo que han surgido nuevos lenguajes que tienen la estructura y las herramientas de un lenguaje de programación y que, al ser transpilados, pueden generar CSS y JavaScript respectivamente. A estos lenguajes a veces se les llama preprocesadores.

Los lenguajes más utilizados son:

Estos lenguajes no son utilizables...

Uso de Sass

Para utilizar Sass, instalemos los paquetes necesarios:

npm install sass-loader node-sass --dev 

Verá que Sass ahora está presente en el archivo packages.json.

La configuración de la transpilación a través de WebPack Encore se encuentra en el archivo webpack.config.js (ubicado en la raíz de la aplicación).

Para integrar Sass en Symfony, abra este archivo y descomente la línea (elimine las // delante de ella):

 .enableSassLoader() 

Descomente también la línea para usar el preprocesador Sass:

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

Esta línea indica el punto de entrada de la transpilación.

También encontrará un archivo por defecto assets/app.js en la estructura de su aplicación.

Contiene este código:

/*  
 * 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 línea:

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

indica que este archivo app.js importará el CSS desde el archivo app.css que se encuentra en el directorio styles. Lo que nos interesa es importar un archivo Sass, y no un archivo CSS, ya que queremos usar el lenguaje Sass. Los archivos Sass tienen todos la extensión .scss.

Por lo tanto, debemos modificar esta línea para importar un archivo app.scss":

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

Cómo usar Vue.js

Para utilizar el framework Vue.js, primero debe instalar sus paquetes:

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

Debe activar Vue.js en el archivo webpack.config.js (raíz del proyecto).

Agregue la línea .enableVueLoader() al final, justo antes de la instrucción enableSassLoader().

El resultado es el siguiente:

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

El objetivo no es aprender cómo funciona el framework Vue.js. Para obtener más información al respecto, le sugerimos que consulte https://vuejs.org

Solo realizaremos un pequeño ejemplo para mostrar cómo funciona Vue.js: un programita que muestra un contador.

Modifique el archivo assets/app.js:

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

El componente Vue estará asociado a un <div id="app"> en el código HTML. Aquí es donde importamos el archivo app.scss; el archivo app.js...

Uso de app.css y app.js en las vistas

Ahora que todo está transpilado, podemos usar nuestro CSS y JavaScript en nuestras páginas. Solo necesitamos vincular los archivos public/build/app.css y public/build/app.js en nuestra plantilla base: base.html.twig.

En realidad, no hay nada más que hacer. Estos archivos se agregan automáticamente gracias a las instrucciones:

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

que están presentes de forma predeterminada en el archivo base.html.twig.

Para probar el código de Vue.js del contador, agregaremos el siguiente código en la página hello.html.twig:

{% verbatim %}  
    <div id="app">  
  <button @click="contador++">  
    El contador va por {{ contador }}  
  </button>  
  {% endverbatim %} 

Observará las instrucciones: {% verbatim %}{% endverbatim %}. De hecho, Vue.js utiliza las mismas dobles llaves ({{ contador }}) para definir sus variables que Twig. Para evitar que Twig busque una variable contador que no le pertenece, encapsulamos la instrucción en el bloque {% verbatim %}{%...