babel-plugin-import-recursive

babel-plugin-import-recursive

A babel plugin that unrolls wildcard imports.

Installation

$ npm install --save-dev babel-plugin-import-recursive

or with yarn

$ yarn add --dev babel-plugin-import-recursive

Example

With the following folder structure:

|- index.js
|- actions
    |- action.a.js
    |- action_b.js
    |- sub_dir
        |- actionC.js

and with the following JS:

import actions from './actions';

will be compiled to:

const _dirImport = {};
import * as _actionA from "./actions/action.a";
import * as _actionB from "./actions/action_b";
_dirImport.actionA = _actionA;
_dirImport.actionB = _actionB;
const actions = _dirImport;

You can also import files recursively using double asterisk like this:

import actions from './actions/**';

will be compiled to:

const _dirImport = {};
import * as _actionA from "./actions/action.a";
import * as _actionB from "./actions/action_b";
import * as _actionC from "./actions/sub_dir/actionC";
_dirImport.actionA = _actionA;
_dirImport.actionB = _actionB;
_dirImport.actionC = _actionC;
const actions = _dirImport;

And import without specifiers

import './actions/**';

will be compiled to:

import "./actions/action.a";
import "./actions/action_b";
import "./actions/sub_dir/actionC";

You can also import all the methods directly, using a single asterisk.

the following JS:

import actions from './actions/*';

will be compiled to:

const _dirImport = {};
import * as _actionA from "./actions/action.a";
import * as _actionB from "./actions/action_b";
for (let key in _actionA) {
  _dirImport[key === 'default' ? 'actionA' : key] = _actionA[key];
}

for (let key in _actionB) {
  _dirImport[key === 'default' ? 'actionB' : key] = _actionB[key];
}
const actions = _dirImport;

And you can use both, double and single asterisk, like this:

import actions from './actions/**/*';

will be compiled to:

const _dirImport = {};
import * as _actionA from "./actions/action.a";
import * as _actionB from "./actions/action_b";
import * as _actionC from "./actions/sub_dir/actionC";
for (let key in _actionA) {
  _dirImport[key === 'default' ? 'actionA' : key] = _actionA[key];
}

for (let key in _actionB) {
  _dirImport[key === 'default' ? 'actionB' : key] = _actionB[key];
}

for (let key in _actionC) {
  _dirImport[key === 'default' ? 'actionC' : key] = _actionC[key];
}
const actions = _dirImport;

Usage

Just add it to your .babelrc file

{
  "plugins": ["import-recursive"]
}

Options

exts

By default, the files with the following extensions: ["js", "mjs", "jsx"], will be imported. You can change this using:

{
    "plugins": [
        ["import-recursive", {
            "exts": ["js", "mjs", "jsx"]
        }]
    ]
}

snakeCase

By default, the variables name would be in camelCase. You can change this using:

{
    "plugins": [
        ["import-recursive", {
            "snakeCase": true
        }]
    ]
}

result: action_a, action_b and action_c

nostrip

By default, the file extension will be removed in the generated import statements, you can change this using:

{
    "plugins": [
        ["import-recursive", {
            "nostrip": true
        }]
    ]
}

listTransform

Callback to transform the resolved file list. You should use .babelrc.js or babel.config.js to define the function. You can sort imported modules by depth, for example:

module.exports = {
    plugins: [
        ['import-recursive', {
            listTransform: function (a, b) {
                return a.length - b.length;
            },
        }]
    ]
};

Forked from babel-plugin-import-directory that was forked from babel-plugin-wildcard 🦔