How to use Babel Module Resolver - Robin Wieruch

In this brief walkthrough, we will use Babel Module Resolver to convert relative paths to aliases for your entire JavaScript application. You can install it via the command line:

And use it in your .babelrc file to create your first module alias:

In this case, we are giving all our Icons an alias path. Imagine you would have another src/services/icon.js file which deals with your icons. Now it has an easier time to import an icon from the src/icons folder:

In your .babelrc file, you can introduce more of these aliases to tidy up your imports for your entire JavaScript application.

If you are using ESLint, you have to let ESLint know about the aliases defined in Babel’s Module Resolver. First, install two more packages:

And second, in your .eslintrc use these new plugins to match Babel’s Module Resolver with ESLint:

That’s it. ESLint should be happy about Babel’s Module Resolver now.

Babel Module Resolver helps you to tidy up your relative imports for your entire JavaScript application. If you want to avoid moving up and down folders with relative paths, add aliases to crucial paths of your application to make it easier to import modules from these areas.