CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel-plugin-module-resolver

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration.mddocs/

Plugin Configuration

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

Capabilities

Plugin Options

Core configuration options for the Babel plugin.

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';
}

Root Configuration

Specify root directories for module resolution. node_modules is implicit.

/** Root directories - string or array of strings, supports glob patterns */
root?: string | string[];

Usage Examples:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"]
    }]
  ]
}

Multiple roots with glob patterns:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src", "./lib", "./src/**/components"]
    }]
  ]
}

Alias Configuration

Map aliases to actual paths. Supports regular expressions, arrays, and functions.

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

/** Alias configuration - single object or array of objects */
alias?: AliasConfig | AliasConfig[];

Basic aliases:

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

Regular expression aliases:

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "^@namespace/foo-(.+)": "packages/\\\\1"
      }
    }]
  ]
}

Function-based aliases:

module.exports = {
  plugins: [
    ["module-resolver", {
      alias: {
        "foo": ([, name]) => `bar${name}`,
        "^@namespace/foo-(.+)": ([, name]) => `packages/${name}`
      }
    }]
  ]
}

Array of paths:

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "my-module": ["./src/my-module", "./lib/my-module"]
      }
    }]
  ]
}

Extensions Configuration

Configure file extensions for resolution.

/** File extensions to resolve */
extensions?: string[];
/** Extensions to strip from resolved paths */
stripExtensions?: string[];

Default extensions: ['.js', '.jsx', '.es', '.es6', '.mjs']

Usage Example:

{
  "plugins": [
    ["module-resolver", {
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
      "stripExtensions": [".js", ".jsx"]
    }]
  ]
}

Working Directory Configuration

Configure the working directory for path resolution.

/** Working directory - path string or special values */
cwd?: string | 'babelrc' | 'packagejson';

Special values:

  • 'babelrc': Use directory containing nearest .babelrc
  • 'packagejson': Use directory containing nearest package.json

Usage Examples:

{
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc"
    }]
  ]
}

Transform Functions Configuration

Configure additional functions to transform beyond the defaults.

/** Additional function names to transform */
transformFunctions?: string[];

Default transform functions:

  • require
  • require.resolve
  • System.import
  • jest.genMockFromModule
  • jest.mock
  • jest.unmock
  • jest.doMock
  • jest.dontMock
  • jest.setMock
  • jest.requireActual
  • jest.requireMock
  • require.requireActual
  • require.requireMock

Usage Example:

{
  "plugins": [
    ["module-resolver", {
      "transformFunctions": [
        "require",
        "require.resolve",
        "proxyquire",
        "myCustomLoader"
      ]
    }]
  ]
}

Custom Resolution Function

Provide a custom path resolution function that replaces the default resolution logic.

/**
 * Custom path resolution function
 * @param sourcePath - Module specifier to resolve
 * @param currentFile - File containing the import
 * @param opts - Plugin options (the original options object passed to the plugin)
 * @returns Resolved path or undefined to use default behavior
 */
resolvePath?: (
  sourcePath: string,
  currentFile: string,
  opts: PluginOptions
) => string | undefined;

Usage Example:

module.exports = {
  plugins: [
    ["module-resolver", {
      extensions: [".js"],
      resolvePath(sourcePath, currentFile, opts) {
        // Custom resolution logic
        if (sourcePath.startsWith('special:')) {
          return sourcePath.replace('special:', './special/');
        }
        // Return undefined to use default behavior
        return undefined;
      }
    }]
  ]
}

Logging Configuration

Configure logging level for path resolution warnings and errors.

/** Logging level */
loglevel?: 'silent' | 'error' | 'warn' | 'info' | 'verbose' | 'silly';

Default: 'warn'

Usage Example:

module.exports = {
  plugins: [
    ["module-resolver", {
      alias: {
        "dependency-string": "module-that-does-not-exist"
      },
      loglevel: 'silent' // Suppress warnings
    }]
  ]
}

Usage with Frameworks

Create React App

// In webpack.config.dev.js
{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    plugins: [
      ["module-resolver", {
        "root": ["./src/App"],
        "alias": {
          "components": "./src/components"
        }
      }]
    ],
    cacheDirectory: true
  }
}

React Native

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "extensions": [".ios.js", ".android.js", ".js", ".json"]
    }]
  ]
}

Flow Integration

Update .flowconfig:

[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=./src

Or use name mapper:

[options]
module.name_mapper='^components\/\(.*\)$' -> '<PROJECT_ROOT>/src/components/\1'

docs

configuration.md

index.md

resolve-path.md

tile.json