Avoiding relative imports in Javascript, TypeScript, Webpack and Jest

A quick post to serve as a quick reference for myself on how to avoid/"remove" relative imports in big Javascript projects, monorepos, etcetera.

If you want some context on why this can be a good idea, check for example the article Importing with Absolute Paths using webpack in JavaScript/TypeScript.

A five seconds summary is:

Converting this unreadable and hard-to-maintain-without-an-IDE monster...

import { whatever } from '../../../../../../../shared/a-category/componentA';

...into something actually meaningful when read:

import { whatever } from '@sharedComponents/a-category/componentA';

The first step is to configure Webpack module aliases and Babel aliases via the babel-plugin-module-resolver plugin.

Then, for Typescript we should configure path mappings

And if you use Jest for tests, it also needs some configuration to allow proper mocking of aliases.

Avoiding relative imports in Javascript, TypeScript, Webpack and Jest published @ . Author:

Comment Share Share Share