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

This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils, you can 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.

// Use this: import MyUtilFn from 'utils/MyUtilFn'; // Instead of that: import MyUtilFn from '../../../../utils/MyUtilFn'; // And it also work with require calls // Use this: const MyUtilFn = require('utils/MyUtilFn'); // Instead of that: const MyUtilFn = require('../../../../utils/MyUtilFn');

Install the plugin

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

or

yarn add --dev babel-plugin-module-resolver 

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

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

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

 const plugins = [ [ require.resolve('babel-plugin-module-resolver'), { root: ["./src/"], alias: { "test": "./test" } } ] ]; 

Good example: // https://gist.github.com/nodkz/41e189ff22325a27fe6a5ca81df2cb91

babel-plugin-module-resolver can be configured and controlled easily, check the documentation for more details

Are you a plugin author (e.g. IDE integration)? We have documented the exposed functions for use in your plugins!

If you're using ESLint, you should use eslint-plugin-import, and eslint-import-resolver-babel-module to remove falsy unresolved modules. If you want to have warnings when aliased modules are being imported by their relative paths, you can use eslint-plugin-module-resolver.

• Atom: Uses atom-autocomplete-modules and enable the babel-plugin-module-resolver option.
• VS Code: Configure the path mapping in jsconfig.json (tsconfig.json for TypeScript), e.g.:

{ "compilerOptions": { "baseUrl": ".", "paths": { "*": ["src/*"], "test/*": ["test/*"], "underscore": ["lodash"] } } }

• IntelliJ/WebStorm: You can mark your module directories as "resources root" e.g if you have ../../../utils/MyUtilFn you can mark ../../../utils as "resources root". This has the problem that your alias also has to be named utils. The second option is to add a webpack.config.js to your project and use it under File->Settings->Languages&Frameworks->JavaScript->Webpack. This will trick webstorm into resolving the paths and you can use any alias you want e.g.:

var path = require('path'); module.exports = { resolve: { extensions: ['.js', '.json', '.vue'], alias: { utils: path.resolve(__dirname, '../../../utils/MyUtilFn'), }, }, };

MIT, see LICENSE.md for details.

• Algolia: InstantSearch.js
• Airbnb: Lottie React Native
• AppDirect
• Callstack: React Native Paper
• Codility
• Eleme: Element
• Expo: Expo SDK
• FormidableLabs: Victory Native
• OpenCollective: OpenCollective
• React Community: React Native Maps
• Uber: Seer, react-vis
• Quasar Framework: Quasar
• Vuetify.js Vuetify
• Zeit: Next.js
• Zenika: Immutadot

Are you also using it? Send a PR!