@dword-design/babel-plugin-wildcard
Advanced tools
Weekly downloads
Readme
Allows you to import
all files from a directory at compile-time.
$ npm install babel-plugin-wildcard
.babelrc
(Recommended).babelrc
{
"plugins": ["wildcard"]
}
$ babel --plugins include script.js
require('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)
.
(e.g. .foo
-> Foo
or foo
depending on settings)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:
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").
FAQs
`import` now works with directories
The npm package @dword-design/babel-plugin-wildcard receives a total of 1,746 weekly downloads. As such, @dword-design/babel-plugin-wildcard popularity was classified as popular.
We found that @dword-design/babel-plugin-wildcard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.