Alias Kitchen

Alias Kitchen allows developers to have a single source of truth regarding project links.

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?

Alias Kitchen is here to help!

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

{
    "paths": {
        "@/*": ["./src/*"],
        "@lol/*": ["./public/*"]
    }
}

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

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 your 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',
            {
                root: ['./src'],
                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

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

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