@cichol/alias-mapper
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    @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.

    Install

    npm i @cichol/alias-mapper

    DownloadsWeekly Downloads

    10

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • cichol