@cichol/alias-mapper

A resolver in order to shorten deeply nested relative path expression.

Usage no npm install needed!

<script type="module">
  import cicholAliasMapper from 'https://cdn.skypack.dev/@cichol/alias-mapper';
</script>

README

@cichol/alias-mapper

A resolver in order to shorten deeply nested relative path expression.

Build StatusLicensePackage Version

Table of Contents

Motivation

In monorepo structure or complex directory hierarchy, we used to exhausted by deeply nested import expression. (e.g. import ... from '../../../../package.json' in packages/frontend/components/button/index.jsx)

Prior Art

Installation

$ npm install --save-dev @cichol/alias-mapper

Integration

Babel

If import ... from '(frontend)/application' expression in backend/server.js file. that will be transformed like const ... = require('../frontend/releases/application').

{
    "plugins": [
        [
            "module:@cichol/alias-mapper",
            {
                "rootDirs": [
                    "sources"
                ],
                "aliases" {
                    "models": "sources/backend/models"
                }
            }
        ]
    ]
}

Write or append above codes into your Babel configuration file. (e.g. babel.config.js, .babelrc(.js(on)?)?)

Babel integration has to match to output directories. (e.g. dist, out, build, ...)

ESLint

If you want to integrate with ESLint, you have to ensure eslint-plugin-import installed. and then, set resolver to your configuration file.

{
    "settings": {
        "import/resolver": {
            "@cichol/alias-mapper": {
                "rootDirs": [
                    "sources"
                ],
                "aliases" {
                    "models": "sources/backend/models"
                }
            }
        }
    }
}

Write or append above codes into your ESLint configuration file. (e.g. .eslintrc(.js(on)?|.ya?ml)?)

ESLint integration has to match to source directories. (e.g. src, ...)

Visual Studio Code

In Visual Studio Code, all JavaScript files are analyzed by internal TypeScript language handler. so, you can just write jsconfig.json file or tsconfig.json for TypeScript project.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "(frontend)/*": "sources/frontend/*",
            "(backend)/*": "sources/backend/*",
            "(models)/*": "sources/backend/models/*"
        }
    },
    "include": ["sources"]
}

Visual Studio Code integration has to wrap alias name with parentheses and match to source directories.

Usage

After the integration process, you can write code with aliased scopes. an alias name has to wrapped by parentheses for avoiding name collision with existing modules by indirect deep dependencies.

Before

- import logger from '../../../../common/logger';

After

+ import logger from '(common)/logger';

License

MIT Licensed.