Alias Kitchen

Alias Kitchen provides developers an ability to have a single source of truth regarding project import aliases.

The problem

Are you tired of writing import {Foo} from './../../../../../bar/bazz/Foo' and then changing it every time you move a file? Do you wish you had a single, reliable source of truth for your project's internal links, seamlessly integrated across all your favorite bundlers?

The solution

Alias Kitchen is here to help!

Set paths property inside your tsconfig.json or jsconfig.json.

{
    "compilerOptions": {
        "paths": {
            "@/components/*": ["./src/components/*"],
            "@/features/*": ["./src/features/*"]
        }
    }
}

And then apply the same configuration to your bundlers using alias-kitchen. Vite, Rollup, Webpack, Rspack, Jest and so on.

From now on, you can use the same import address everywhere.

import {Button} from '@/components/Button';

Installation

npm i -D alias-kitchen

Usage with bundlers

alias-kitchen provides a utility function kitchen which allows a developer to choose which recipe of alias config they are going to use.

import {kitchen} from 'alias-kitchen';

const aliasConfig = kitchen({recipe: 'rollup'});

Alias names and paths are picked from compilerOptions.paths property of TypeScript config file (tsconfig.json). You can set a custom file name and path to look up.

import {kitchen} from 'alias-kitchen';

const aliasConfig = kitchen({
    configName: 'jsconfig.json',
    searchPath: '/your/project/path'
});

Rollup

With @rollup/plugin-alias.

// rollup.config.js
import alias from '@rollup/plugin-alias';
import {kitchen} from 'alias-kitchen';

export default {
    //...
    plugins: [
        alias({
            entries: kitchen({recipe: 'rollup'}),
        }),
    ],
};

Vite

// vite.config.ts
import {defineConfig} from 'vite';
import {kitchen} from 'alias-kitchen';

export default defineConfig({
    //...
    resolve: {
        alias: kitchen({recipe: 'vite'}),
    }
})

Babel

With babel-plugin-module-resolver.

// babel.config.js
const {kitchen} = require('alias-kitchen');

module.exports = {
    //...
    plugins: [
        [
            'babel-plugin-module-resolver',
            {
                alias: kitchen({recipe: 'babel'}),
            },
        ],
    ],
};

Webpack

// webpack.config.js
const {kitchen} = require('alias-kitchen');

module.exports = {
    //...
    resolve: {
        alias: kitchen({recipe: 'webpack'}),
    },
};

Rspack

// rspack.config.ts
import {defineConfig} from '@rspack/cli';
import {kitchen} from 'alias-kitchen';

export default defineConfig({
    //...
    resolve: {
        alias: kitchen({recipe: 'rspack'}),
    },
});

Jest

// jest.config.ts
import {kitchen} from 'alias-kitchen';

export default {
    //...
    moduleNameMapper: {
        //...
        ...kitchen({recipe: 'jest'}),
    },
};

Add custom recipe function

Developers can provide their own recipe functions to get desired output

import path from 'node:path';
import {kitchen} from 'alias-kitchen';

// produces array of aliases with relative paths resolved to absolute
const customRecipe = (normalizedPaths) => {
    return normalizedPaths.map(([alias, directory]) => [
        alias,
        path.resolve(directory),
    ]);
};

const aliasConfig = kitchen({recipe: customRecipe});