babel-plugin-module-resolver

WebJar for babel-plugin-module-resolver

License	MIT
GroupId	org.webjars.npm
ArtifactId	babel-plugin-module-resolver
Last Version	3.2.0
Release Date	Feb 25, 2020
Type	jar
Description	babel-plugin-module-resolver WebJar for babel-plugin-module-resolver
Project URL	https://www.webjars.org
Source Code Management	https://github.com/tleunen/babel-plugin-module-resolver

Download babel-plugin-module-resolver

Filename	Size
babel-plugin-module-resolver-3.2.0.pom
babel-plugin-module-resolver-3.2.0.jar	16 KB
babel-plugin-module-resolver-3.2.0-sources.jar	22 bytes
babel-plugin-module-resolver-3.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/babel-plugin-module-resolver/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>babel-plugin-module-resolver</artifactId>
    <version>3.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/babel-plugin-module-resolver/
implementation 'org.webjars.npm:babel-plugin-module-resolver:3.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/babel-plugin-module-resolver/
implementation ("org.webjars.npm:babel-plugin-module-resolver:3.2.0")

Apache Buildr

'org.webjars.npm:babel-plugin-module-resolver:jar:3.2.0'

Apache Ivy

<dependency org="org.webjars.npm" name="babel-plugin-module-resolver" rev="3.2.0">
  <artifact name="babel-plugin-module-resolver" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='babel-plugin-module-resolver', version='3.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "babel-plugin-module-resolver" % "3.2.0"

Leiningen

[org.webjars.npm/babel-plugin-module-resolver "3.2.0"]

Dependencies

compile (5)

Group / Artifact	Type	Version
org.webjars.npm : resolve	jar	[1.4.0,2)
org.webjars.npm : reselect	jar	[3.0.1,4)
org.webjars.npm : find-babel-config	jar	[1.1.0,2)
org.webjars.npm : pkg-up	jar	[2.0.0,3)
org.webjars.npm : glob	jar	[7.1.2,8)

Project Modules

There are no modules declared in this project.

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:
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');

Getting started

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

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. If you want to have warnings when aliased modules are being imported by their relative paths, you can use eslint-plugin-module-resolver.

Editors autocompletion

• 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'),
    },
  },
};

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
• Quasar Framework: Quasar
• Vuetify.js Vuetify
• Zeit: Next.js
• Zenika: Immutadot

Are you also using it? Send a PR!

Versions

Version
3.2.0 Feb 25, 2020