Babel plugin for bulk import from multiple files
npm install babel-plugin-bulk-importfs or glob modules directly.Usually, in modular systems it's either modules register themselves within the engine's exposed endpoints or the engine discovers modules
(plugins) on its own. Both approaches have their drawbacks, especially when it's time for your project to be Webpack'ed.
It would be fair to say that this plugin provides some sort of automation when new modules/features/plugins are created. I'm sure you have your own use-case for this, but here's mine, as an example:
.
├── modules
| ├── landing
| | └── features
| └── profile
| └── features
└── src
└── index.js
Goal
What I want to achieve is that whenever a new module is created in directory I want it to be injected into my engine (./src/index.js) with as fewer manual actions as possible.Problem
In order to minimize amount of manual work and, obviously, number of potential bugs, I'd go with my engine being discovering all available modules automatically. This can be easily done by scanning the ./modules directory and importing each one's features. However, when you do that, webpack won't pack these imports and deliver them to client-side app. Solution
Transpile dynamic imports as soon as they appear in the code. And this is what this plugin does.Installation
`
npm install babel-plugin-bulk-import --save-dev
In your
add the plugin:
`
{
"presets": ["es2015"],
"plugins": ["babel-plugin-bulk-import"]
}Usage
This plugin uses glob npm module for discovery so refer to its documentation for clues about path syntax.
Let's assume we have two files:
// ./features/featureA.js
module.exports = {
feature: 'A'
};// ./features/featureB.js
module.exports = {
feature: 'B'
};
We're all used to
import Stuff from './features/featureA.js';
import AnotherStuff from './features/featureB.js';
but now you can just do
import as Features from './features/.js'
/* Features would be
{
featureA: {feature: 'A'},
featureB: {feature: 'B'}
}
*/
or
import {featureA as Stuff, featureB as AnotherStuff} from './features/*.js'
/* Stuff would be
{
feature: 'A'
}
*/
/* AnotherStuff would be
{
feature: 'B'
}
*/
Examples
Test case:
.
├── case
| ├── subfolder
| | └── case3.js // module.exports = { case: 999 };
| ├── case1.js // module.exports = { case: 1 };
| ├── case2.js // module.exports = { case: 2 };
| └── case3.js // module.exports = { case: require('./subfolder/case3') };
└── src
└── index.js
Example #1 (local imports)
import as all from './case//.js';
will result in:
all = {
case: {
case1: { case: 1 },
case2: { case: 2 },
case3: { case: { case: 999 } },
subfolder: { case3: { case: 999 } }
}
}
Example #2 (imports from node_modules)
import as all from 'lodash/{,*/}.js';
will result in:
all = {
node_modules : {
lodash: {
LODASH_MODULE1: ITS_EXPORT_CONTENTS
LODASH_MODULE2: ITS_EXPORT_CONTENTS
...
}
}
}
Example #3 (collisions)
import {case1 as C1, case2 as C2, case3 as C3, subfolder as S} from './case/*/.js';
will result in:
C1 = {
case: 1
}C2 = {
case: 2
}
C3 = {
case: 999
}
S = undefined // that's because there was no file subfolder.js found