babel-plugin-wildcard

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

Installation

``sh
$ npm install babel-plugin-wildcard
`

Usage

$3

.babelrc

`json
{
"plugins": ["wildcard"]
}
`

$3

`sh
$ babel --plugins include script.js
`

$3

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

Example

With the following folder structure:

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

the following JS:

`javascript
import * as Items from './dir';
`

will be compiled to:

`javascript
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:

`javascript
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:

`javascript
import as tests from './dir/.spec';
`

will compile to:

`javascript
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:

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

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

$3


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

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

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

$3


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

`javascript
{
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).

$3

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

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

$3

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:

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

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