@cichol/alias-mapper

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

Table of Contents

• @cichol/alias-mapper
  • Table of Contents
  • Motivation
    • Prior Art
  • Installation
  • Integration
    • Babel
    • ESLint
    • Visual Studio Code
  • Usage
  • License

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

• babel-plugin-module-resolver
  It has a risk of name collision with existing modules by indirect deep dependencies. because it allows using any name as an alias.
• babel-plugin-root-import
  It allows only one character as an alias name. (e.g. ~ is allowed, but ~~ is not)
  • eslint-import-resolver-babel-plugin-root-import
    It requires babel-plugin-root-import@^5. but latest version of babel-plugin-root-import@6 is released.
• babel-plugin-hash-resolve
  It requires off some option of eslint-plugin-import. (e.g. import/no-unresolved, import/extensions)

Installation

1$ 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').

1{
2    "plugins": [
3        [
4            "module:@cichol/alias-mapper",
5            {
6                "rootDirs": [
7                    "sources"
8                ],
9                "aliases" {
10                    "models": "sources/backend/models"
11                }
12            }
13        ]
14    ]
15}

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.

1{
2    "settings": {
3        "import/resolver": {
4            "@cichol/alias-mapper": {
5                "rootDirs": [
6                    "sources"
7                ],
8                "aliases" {
9                    "models": "sources/backend/models"
10                }
11            }
12        }
13    }
14}

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.

1{
2    "compilerOptions": {
3        "baseUrl": ".",
4        "paths": {
5            "(frontend)/*": "sources/frontend/*",
6            "(backend)/*": "sources/backend/*",
7            "(models)/*": "sources/backend/models/*"
8        }
9    },
10    "include": ["sources"]
11}

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

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

After

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

License

MIT Licensed.