babel-plugin-dot-dot-slash

Babel plugin to solve the ../../../ problem.

Example

//before
import Module from '../../../path/to/module.js'
 
//after
import Module from '+/path/to/module.js'

Install

npm install --save-dev babel-plugin-dot-dot-slash

Then you only need to specify it as a Babel plugin, which you would typically do in your .babelrc file:

{
  "plugins": [
    "dot-dot-slash"
  ]
}

Config

Root suffix

If you want to add a root suffix because all your files are in a especific directory, you can set it like this:

{
  "plugins": [
    ["dot-dot-slash", {
      "rootSuffix": "some/suffix"
    }]
  ]
}

Custom import prefix

If you don't like the + syntax you can set your own prefix:

{
  "plugins": [
    ["dot-dot-slash", {
      "importPrefix": "#"
    }]
  ]
}

Then you can do:

import Module from '#/path/to/module.js'

Fallback to absolute path

By default, if the process.cwd() is not the project root, the plugin will transform the import declaration to a absolute path. It will make the plugin works in cases where the process is started from other directory, like when you are running your tests with ava for example.

To disable it, just set the fallbackToAbsolute config to disabled:

{
  "plugins": [
    ["dot-dot-slash", {
      "fallbackToAbsolute": "disabled"
    }]
  ]
}