Better Readability with Aliases for Typescript Module Imports

Lars Wächter has a great article on how to implement module aliases on Typescript, thus improving your code from looking something like this:

import { User } from '../../user/model';
import { Article } from '../../article/model';

import { Cache } from '../../../../cache';
import { MongoDB } from '../../../../mongodb';

Into something that can look like this:

import { User } from '@modules/user/model';
import { Article } from '@modules/article/model';

import { Cache } from '@services/cache';
import { MongoDB } from '@services/mongodb';

Fantastic!

However, I encountered an issue when using the zeit/pkg packaging tool, which bundles your node js application into a single executable file.

The problem was that pkg didn’t support module aliases, the way Lars solved it above. Doing a little bit of research, I found ef-tspm which is a post typescript compilation build step which reverts those module aliases (e.g. @/your-dir/your-file ) back into its pre alias form (e.g. ../../../../your-dir/your-file). This form can be handled by the pkg tool.

What will my build process look like?

1. tsc – Compile your Typescript code into Javascript.
2. ef-tspm – Revert the module aliases found in your Javascript code.
3. pkg . – Package your node js application.

Cheers!

References

1. https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353
2. https://github.com/vercel/pkg/issues/249#issuecomment-643117032