Babel Project Relative Import

Babel plugin to transform project relative import paths to file relative import paths. Highly inspired by babel-root-import which works great, but converts to absolute paths, so the built files are not portable accross systems.

Tested with babel-cli, babel-loader, grunt-babel and gulp-babel. Does also transform to the same path under Windows.

Example

// project/dir/test.js
import Test from '~/otherdir/example.js'

// project/dir/subdir/test.js
import Test from '~/otherdir/subdir/example.js'

Will be transformed to:

// project/dir/test.js
import Test from './../otherdir/example.js'

// project/dir/subdir/test.js
import Test from './../../otherdir/subdir/example.js'

Install

npm install babel-project-relative-import

Usage

Add babel-project-root-import to your plugins in your babel.rc:

{
  "plugins": [
    "babel-project-relative-import"
  ]
}

Plugin Options

projectPathSuffix

If all your source files are inside a subdirectory set this option to the path of the subdirectory so paths get resolved correctly.

{
  "plugins": [
    ["babel-project-relative-import", {
      "projectPathSuffix": "src/"
    }]
  ]
}

importPathPrefix

If you want to have a custom prefix which will be used to detect imports, you can set this option, defaults to ~.

{
  "plugins": [
    ["babel-project-relative-import", {
      "importPathPrefix": "^"
    }]
  ]
}