babel-plugin-module-resolver

A babel plugin to add a new resolver for your modules when compiling your code using Babel. The plugin allows you to add new "root" directories that contains your modules. It also allows your to setup custom alias which can also be directories or specific files, or even other npm modules.

Description

The reason of this plugin is to simplify the require/import paths in your project. Therefore, instead of using complex relative paths like ../../../../utils/my-utils, you would be able to write utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.

Here's a full example:

// Instead of using this;
import MyUtilFn from '../../../../utils/MyUtilFn';
// Use that:
import MyUtilFn from 'utils/MyUtilFn';

Note: It also works with require(), and you can alias a NPM module.

Usage

Install the plugin

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

Specify the plugin in your .babelrc with the custom root or alias. Here's an example:

{
  "plugins": [
    "transform-object-rest-spread",
      ["module-resolver", {
        "root": ["./src"],
        "alias": {
          "test": "./test",
          "underscore": "lodash"
        }
      }]
    ]
}

Note: If you're using a custom extension (other than .js, .jsx, .es and .es6), you can add the extensions array in the config.

ESLint plugin

If you're using ESLint, you should use the eslint-plugin-import, and this eslint-import-resolver-babel-module in order to remove falsy unresolved modules.

Editors autocompletion

• Atom: Uses atom-autocomplete-modules and enable the babel-plugin-module-resolver option.
• IntelliJ/WebStorm: You can add custom resources root directories, make sure it matches what you have in this plugin.

License

MIT, see LICENSE.md for details.