or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdresolve-path.md
tile.json

tessl/npm-babel-plugin-module-resolver

Module resolver plugin for Babel that enables custom root directories and aliases for import/require statements

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-plugin-module-resolver@5.0.x

To install, run

npx @tessl/cli install tessl/npm-babel-plugin-module-resolver@5.0.0

index.mddocs/

Babel Plugin Module Resolver

Babel Plugin Module Resolver is a Babel plugin that provides enhanced module resolution capabilities for JavaScript applications by enabling custom root directories and aliases for import/require statements. It allows developers to replace complex relative paths like ../../../../utils/my-utils with clean absolute-style imports like utils/my-utils, significantly improving code readability and maintainability.

Package Information

  • Package Name: babel-plugin-module-resolver
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-plugin-module-resolver

Core Imports

// For Babel configuration
const moduleResolver = require('babel-plugin-module-resolver');

// For plugin authors using the resolvePath function
const { resolvePath } = require('babel-plugin-module-resolver');

ES6 imports:

// For plugin authors using the resolvePath function
import { resolvePath } from 'babel-plugin-module-resolver';

Basic Usage

Babel Configuration

Add the plugin to your .babelrc configuration:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "components": "./src/components",
        "utils": "./src/utils",
        "underscore": "lodash"
      }
    }]
  ]
}

Or in .babelrc.js:

const plugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: ["./src/"],
      alias: {
        "components": "./src/components",
        "utils": "./src/utils"
      }
    }
  ]
];

module.exports = { plugins };

Module Resolution in Code

After configuration, you can use clean imports:

// Instead of complex relative paths:
import MyComponent from '../../../../components/MyComponent';
import { myUtil } from '../../../utils/myUtil';

// Use clean absolute-style imports:
import MyComponent from 'components/MyComponent';
import { myUtil } from 'utils/myUtil';

// Works with require() too:
const MyComponent = require('components/MyComponent');

Architecture

The plugin operates as a Babel AST transformer with several key components:

  • Babel Plugin Interface: Main plugin factory function that integrates with Babel's transformation pipeline
  • Path Resolution Engine: Core logic for resolving module paths using configured roots and aliases
  • Configuration Normalizer: Processes and validates plugin options with smart defaults
  • AST Transformers: Specialized handlers for different types of imports (import statements, require calls, dynamic imports)
  • External API: Exposed resolvePath function for use by other plugins and tools

The plugin runs during Babel's transformation phase, visiting import/export declarations and function calls to transform module specifiers according to the configured resolution rules.

Capabilities

Babel Plugin Configuration

Main plugin configuration options for setting up custom module resolution behavior. The plugin transforms import/require statements during Babel compilation.

/**
 * Babel plugin factory function
 * @param babel - Babel instance with types utilities
 * @returns Babel plugin configuration object
 */
function createModuleResolverPlugin({ types }): BabelPlugin;

interface BabelPlugin {
  name: string;
  manipulateOptions(opts: any): void;
  pre(file: any): void;
  visitor: {
    Program: {
      enter(programPath: any, state: any): void;
      exit(programPath: any, state: any): void;
    };
  };
  post(): void;
}

Plugin Configuration

Path Resolution API

External API for plugin authors and tools that need to resolve paths using the same logic as the Babel plugin.

/**
 * Resolves module paths using plugin configuration
 * @param sourcePath - The module specifier to resolve
 * @param currentFile - The file containing the import
 * @param opts - Plugin configuration options
 * @returns Resolved path or null if no resolution found
 */
function resolvePath(
  sourcePath: string,
  currentFile: string,
  opts?: PluginOptions
): string | null;

Path Resolution API

Types

interface PluginOptions {
  /** Root directories for module resolution */
  root?: string | string[];
  /** Path aliases mapping */
  alias?: AliasConfig | AliasConfig[];
  /** File extensions to resolve */
  extensions?: string[];
  /** Extensions to strip from resolved paths */
  stripExtensions?: string[];
  /** Working directory for resolution */
  cwd?: string | 'babelrc' | 'packagejson';
  /** Additional functions to transform */
  transformFunctions?: string[];
  /** Custom path resolution function */
  resolvePath?: (sourcePath: string, currentFile: string, opts: PluginOptions) => string | undefined;
  /** Logging level */
  loglevel?: 'silent' | 'error' | 'warn' | 'info' | 'verbose' | 'silly';
}

interface AliasConfig {
  [key: string]: string | string[] | ((matches: RegExpExecArray) => string | string[]);
}