babel-plugin-config-module-resolver

babel-plugin-config-module-resolver is a Babel plugin that resolves modules using the tsconfig.json or jsconfig.json configuration.

It is a light wrapper around babel-plugin-module-resolver.

Installation

Add babel-plugin-config-module-resolver to your project:

npm install babel-plugin-config-module-resolver --save-dev

Usage

Add babel-plugin-config-module-resolver to your babel configuration:

// babel.config.js
{
  "plugin": ["config-module-resolver"]
}

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@com/*": ["components/*"],
      "@css/*": ["components/*.module.css"]
    }
  }
}

// App.js (before)
import Button from '@com/Button';
import ButtonStyle from '@css/Button';
 
// App.js (after)
import Button from '/path/to/src/components/Button';
import ButtonStyle from '/path/to/src/components/Button.module.css';