Configurar TypeScript y crear alias con Webpack Encore en Symfony

En el siguiente artículo vamos a aprender a configurar y crear alias en Webpack Encore desde Symfony para poder utilizar TypeScript en nuestros proyectos. También aprenderemos a configurar alias de Webpack que apunten a directorios de nuestro proyecto para poder importar nuestras clases de TypeScript de forma sencilla sin tener que utilizar rutas relativas.

Lo primero que tenemos que hacer es instalar el paquete tsconfig-paths-webpack-plugin con NPM:

npm i --save tsconfig-paths-webpack-plugin

Una vez instalado, vamos a crear el archivo tsconfig.json (en nuestro caso lo vamos a hacer dentro de la carpeta /assets que es donde tenemos todos los assets de nuestro proyecto) con el siguiente contenido.

{
  "compilerOptions": {
    "sourceMap": true,
    // Indicamos la última versión de ECMAScript.
    "target": "esnext",
    // Busca en node_modules para importar de forma no-relativa.
    "moduleResolution": "node",
    // Habilita el modo estricto para configuraciones como strictNullChecks & noImplicitAny.
    "strict": true,
    "jsx": "react",
    "isolatedModules": true,
    "esModuleInterop": true,
    "baseUrl": "./ts/",
    "paths": {
      "@ts/*": ["*"]
    }
  }
}

Propiedades importantes a tener en cuenta:

baseUrl: la ruta relativa donde estarán nuestros archivos de TypeScript.
paths: las rutas que tendrán los alias que definiremos después en Webpack.

Ahora tenemos que añadir el plugin a la configuración de Webpack Encore. Por lo que vamos a editar el archivo webpack.config.js que se encuentra en la raíz de nuestro proyecto de Symfony.

En el siguiente ejemplo crearemos varios alias, por lo que necesitaremos tener instalado el plugin Path.

const Encore = require('@symfony/webpack-encore');
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const ROOT_PATH = path.resolve(__dirname, './');
const ASSETS_PATH = ROOT_PATH + '/assets';

const ALIASES = {
    '@assets' : ASSETS_PATH,
    '@ts' : ASSETS_PATH + '/ts',
    '@styles' : ASSETS_PATH + '/styles'
};

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    // Aquí se indica a Webpack que queremos tener estos alias disponibles
    .addAliases(ALIASES)

    // Aquí habría más detalles de configuración que vamos a omitir
    // ...
;

Ahora, al final de nuestro archivo webpack.config.js tenemos que añadir el siguiente código:

var config = Encore.getWebpackConfig()

config.resolve.plugins = [
    new TsconfigPathsPlugin({
        configFile: './assets/tsconfig.json',
        extensions: ['.jsx', '.json', '.ts', '.tsx']
    })
]

module.exports = config

Ahí le indicamos donde se encuentra nuestro archivo de configuración tsconfig.json y las extensiones que queremos aceptar.

Una vez hecho esto, podemos utilizar los alias definidos en Webpack de la siguiente manera:

import {BaseController} from "@ts/Controller/BaseController"
import {ImportedClass} from "@ts/ImportedClass"

class MyFirstController extends BaseController {
    execute(): void {
        let importedClass = new ImportedClass()
        importedClass.execute()
    }
}

export {MyFirstController}

Y esto sería todo.

Cualquier duda nos vemos en los comentarios. 😉

Blog Reacción Estudio

Configurar TypeScript y crear alias con Webpack Encore en Symfony