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. (This has been changed and it supports relative output paths now, so maybe check it out!)

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

Notice for Webpack users

If you're using Webpack to bundle your application this plugin may not be needed. You can use Webpacks's resolve.alias for the same behaviour, which also works for require.

Upgrade from 1.x

There are two breaking changes:

1. Renamed option projectPathSuffix to sourceDir to be less confusing.
2. The option importPathPrefix automatically added a / to the supplied prefix in previous versions, this has been removed and allows for prefixes like ^dir/test. Just add the / to your importPathPrefix yourself for the old behaviour.

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

sourceDir

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", {
      "sourceDir": "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": "^"
    }]
  ]
}