babel-plugin-global-require

`babel-plugin-global-require`

Installation

npm install --save-dev babel-plugin-global-require

Tell the plugin where's your root (.babelrc):

{
  "plugins": [
    ["global-require", {
      "root": "src"
    }]
  ]
}

What are the benefits?

You'll use the same require statement from anywhere in your project;
You'll avoid path hell ../../../../..;
You'll write a more concise code.

This plugin is convention based: the alias is always the name of the file. For example:

src (root)
  util
    queue
      InMemoryAcknowledgingQueue.js
      PriorityQueue.js
      CallbackQueue.js
      ...
  io
    NuclearEventEmitter.js
  user
    UserActions.js
    UserStore.js
  security
    authorization
      rbac
        Role.js
  ...

Then:

import NuclearEventEmitter from 'NuclearEventEmitter'
 
// (...)
import UserStore from 'UserStore'
 
// require
var Role = require('Role')

It will translate 'NuclearEventEmitter' to src/io/NuclearEventEmitter.js for you. And the same happens to UserStore and Role.

But what about conflicts?

Given the following structure:

src
  security
    authorization
      rbac
        hasAccessTo.js
      acl
        hasAccessTo.js

You can't require hasAccessTo.js only by its name because it would result in a require of undesired file. So for this specific case, the conflict is resolved simply by going up one directory (and it keeps going until there's no conflict):

import { hasAccessTo as ... } from 'rbac/hasAccessTo'
import { hasAccessTo as ... } from 'acl/hasAccessTo'

babel-plugin-global-require