@dword-design/babel-plugin-wildcard

babel-plugin-wildcard

Allows you to import all files from a directory at compile-time.

Installation

$ npm install babel-plugin-wildcard

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["wildcard"]
}

Via CLI

$ babel --plugins include script.js

Via Node API

require('babel').transform('code', {
  plugins: ['wildcard']
});

Example

With the following folder structure:

|- index.js
|- dir
    |- a.js
    |- b.js
    |- c.js

the following JS:

import * as Items from './dir';

will be compiled to:

const Items = {};
import _wcImport from "./dir/a";
Items.A = _wcImport;
import _wcImport1 from "./dir/b";
Items.B = _wcImport1;
import _wcImport2 from "./dir/c";
Items.C = _wcImport2;

meaning you will be able to access the items using Items.A and Items.B.

You can also selectively choose files using:

import { A, C } from "dir/*";

which in the above example would convert to:

import A from "./dir/a";
import C from "./dir/c";

The above is like doing:

import * as temp from "dir";
const { A, C } = temp;

There is also simple Glob support so given the directory structure:

|- index.js
|- dir
    |- a.js
    |- a.spec.js
    |- b.js
    |- b.spec.js

this import:

import * as tests from './dir/*.spec';

will compile to:

import aSpec from './dir/a.spec';
import bSpec from './dir/b.spec';

Files are automatically camel-cased and in the import statements the extensions are clipped unless specified otherwise (see below)

Information

• File extensions are removed in the resulting variable. Dotfiles will be imported without their preceding . (e.g. .foo -> Foo or foo depending on settings)
• in an import { ... } from 'foo/*', the identifiers inside { ... } are the same as what their name would be if you were to import the whole directory. This means it is the files' names' pascal/camel-cased and extensions removed etc. by default (depending on settings of course).

Options

babel-plugin-wildcard allows you to change various settings by providing an options object by using the following instead:

{
    plugins: [
        ['wildcard', { options }]
    ]
}

where { options } is the options object. The following options are available:

exts

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

{
    plugins: [
        ['wildcard', {
            'exts': ["js", "es6", "es", "jsx", "javascript"]
        }]
    ]
}

If you add the extension "", it will also import subdirectories.

nostrip

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

{
    plugins: [
        ['wildcard', {
            'nostrip': true
        }]
    ]
}

This is useful when the extension of your source files is different from the outputted ones. (e.g. .jsx to .js).

useCamelCase

By default the name is converted to PascalCase, if you prefer camelCase, you may set this option to true:

{
    plugins: [
        ['wildcard', {
            'useCamelCase': true
        }]
    ]
}

noModifyCase

By default, the name will be automatically pascal cased, the following regex is used to extract the words, those words then have their first letter capitalized and are joined together:

[A-Z][a-z]+(?![a-z])|[A-Z]+(?![a-z])|([a-zA-Z\d]+(?=-))|[a-zA-Z\d]+(?=_)|[a-z]+(?=[A-Z])|[A-Za-z0-9]+

you can disable this behavior using:

{
    plugins: [
        ['wildcard', {
            'noModifyCase': true
        }]
    ]
}

Extensions are still removed (except dotfiles, see "Information").