Allows you to import all files from a directory at compile-time.
$ npm install babel-plugin-wildcard.babelrc
{
"plugins": ["wildcard"]
}$ babel --plugins include script.jsrequire('babel').transform('code', {
plugins: ['wildcard']
});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)
- File extensions are removed in the resulting variable. Dotfiles will be imported without their preceding
.(e.g..foo->Fooorfoodepending 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).
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:
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.
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).
By default the name is converted to PascalCase, if you prefer camelCase, you may set this option to true:
{
plugins: [
['wildcard', {
'useCamelCase': true
}]
]
}
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").
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent