babel-plugin-module-resolver
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.
Description
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:;// Instead of that:; // And it also work with require calls// Use this:const MyUtilFn = ;// Instead of that:const MyUtilFn = ;
Getting started
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:
Documentation
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!
ESLint plugin
If you're using ESLint, you should use eslint-plugin-import, and eslint-import-resolver-babel-module 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.
- VS Code: Configure the path mapping in
jsconfig.json
(tsconfig.json
for TypeScript), e.g.:
"compilerOptions": "baseUrl": "." "paths": "*": "src/*" "test/*": "test/*" "underscore": "lodash"
License
MIT, see LICENSE.md for details.
Who is using babel-plugin-module-resolver ?
- 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
- Vuetify.js Vuetify
- Zeit: Next.js
- Zenika: Immutadot
Are you also using it? Send a PR!