import-all.macro
A babel-plugin-macro that allows you to import all files that match a glob
The problem
You want to import all files that match a glob
without having to import them
individually.
This solution
This is a babel-plugin-macro which allows you to import
files that match a glob. It supports import
statements for synchronous
resolution as well as dynamic import()
for deferred resolution (for code
splitting with react router for example).
Table of Contents
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies
:
npm install --save-dev import-all.macro
Usage
Once you've
configured babel-plugin-macros
you can import/require import-all.macro
.
The importAll
functions accept a glob
and will transpile your code
to import statements/dynamic imports for each file that matches the given glob.
Let's imagine you have a directory called my-files
with the files a.js
,
b.js
, c.js
, and d.js
.
Here are a few before/after examples:
importAll
uses dynamic import: README:1 importAll
uses dynamic import
document ↓ ↓ ↓ ↓ ↓ ↓ document
importAll.sync
uses static imports: README:2 importAll.sync
uses static
imports
const a = importAll ↓ ↓ ↓ ↓ ↓ ↓ const a = './files/a.js': _filesAJs './files/b.js': _filesBJs './files/c.js': _filesCJs './files/d.js': _filesDJs
importAll.deferred
gives an object with dynamic imports: README:3
importAll.deferred
gives an object with dynamic imports
const routes = importAll ↓ ↓ ↓ ↓ ↓ ↓ const routes = { return import'./files/a.js' } { return import'./files/b.js' } { return import'./files/c.js' } { return import'./files/d.js' }
Configure importAll
to transform import path before generating imports
babel-plugin-macros.config.js
:
moduleexports = importAll: { const projectRoot = path const modulePathWithoutExt = modulePath const absolutePath = path const pathRelativeToRoot = path return pathRelativeToRoot }
const a = importAll ↓ ↓ ↓ ↓ ↓ ↓const a = './files/a': _filesA './files/b': _filesB './files/c': _filesC './files/d': _filesD
Caveats
Some static analysis tools (like ESLint, Flow, and Jest) wont like this very
much without a little additional work. So Jest's watch mode may not pick up all
your tests that are relevant based on changes and some ESLint plugins (like
eslint-plugin-import
) will probably fail on this.
Inspiration
Other Solutions
I'm not aware of any, if you are please make a pull request and add it here!
Issues
Looking to contribute? Look for the Good First Issue label.
🐛 Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Contributors ✨
Thanks goes to these people (emoji key):
Kent C. Dodds 💻 📖 🚇 ⚠️ |
Jonathan Neal 📖 |
Rafał Ruciński 🐛 💻 |
Justin Dorfman 🔍 |
Michaël De Boey 💻 |
Jianhua Cheng 💻 ⚠️ 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT