Config TypeScript and create aliases in Webpack Encore from Symfony

Deja un comentario

In the following article we will learn how to configure and create aliases in Webpack Encore from Symfony to be able to use TypeScript in our projects. We will also learn how to configure Webpack aliases that point to directories in our project in order to import our TypeScript classes easily without having to use relative paths.

The first thing we have to do is to install the tsconfig-paths-webpack-plugin package with NPM:

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

Once installed, we are going to create the tsconfig.json file (in our case we are going to do it inside the /assets folder that is where we have all the assets of our project) with the following content.

{
  "compilerOptions": {
    "sourceMap": true,
    // Last ECMAScript version.
    "target": "esnext",
    // Search in node_modules for non-relative import.
    "moduleResolution": "node",
    // Enables strict mode for settings such as strictNullChecks & noImplicitAny.
    "strict": true,
    "jsx": "react",
    "isolatedModules": true,
    "esModuleInterop": true,
    "baseUrl": "./ts/",
    "paths": {
      "@ts/*": ["*"]
    }
  }
}

Important properties to consider:

  • baseUrl: the relative path where our TypeScript files will be.
  • paths: the paths that will have the aliases that we will define later in Webpack.

Now we need to add the plugin to the Webpack Encore configuration. So let’s edit the webpack.config.js file located in the root of our Symfony project.

In the following example we will create several aliases, so we will need to have the Path plugin installed.

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')

    // Here we tell Webpack that we want to have these aliases available
    .addAliases(ALIASES)

    // Here there would be more configuration details that we are going to omit
    // ...
;

Now, at the end of our webpack.config.js file we have to add the following code:

var config = Encore.getWebpackConfig()

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

module.exports = config

There we indicate where our configuration file tsconfig.json is located and the extensions we want to accept.

Once this is done, we can use the aliases defined in Webpack as follows:

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}

And that would be all.

Any questions, see you in the comments 😉