A macro for babel-plugin-macros that allows you to import all files that match a glob
npm install import-all.macroA babel-plugin-macro that allows you to import all files that match a glob
---
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
[![Babel Macro][macros-badge]][babel-plugin-macros]
You want to import all files that match a glob without having to import them
individually.
This is a [babel-plugin-macro][babel-plugin-macros] 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).
- Installation
- Usage
- Caveats
- Inspiration
- Other Solutions
- Issues
- π Bugs
- π‘ Feature Requests
- Contributors β¨
- LICENSE
This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's devDependencies:
```
npm install --save-dev import-all.macro
Once you've
configured babel-plugin-macros
you can import/require import-all.macro.
The importAll functions accept a [glob][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
`javascript
import importAll from 'import-all.macro'
document.getElementById('load-stuff').addEventListener('click', () => {
importAll('./files/*.js').then(all => {
console.log(all)
})
})
β β β β β β
document.getElementById('load-stuff').addEventListener('click', () => {
Promise.all([
import('./files/a.js'),
import('./files/b.js'),
import('./files/c.js'),
import('./files/d.js'),
])
.then(function importAllHandler(importVals) {
return {
'./files/a.js': importVals[0],
'./files/b.js': importVals[1],
'./files/c.js': importVals[2],
'./files/d.js': importVals[3],
}
})
.then(all => {
console.log(all)
})
})
`
**importAll.sync uses static imports: README:2 importAll.sync uses static
imports**
`javascript
import importAll from 'import-all.macro'
const a = importAll.sync('./files/*.js')
β β β β β β
import * as _filesAJs from './files/a.js'
import * as _filesBJs from './files/b.js'
import * as _filesCJs from './files/c.js'
import * as _filesDJs from './files/d.js'
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:3importAll.deferred gives an object with dynamic imports**
`javascript
import importAll from 'import-all.macro'
const routes = importAll.deferred('./files/*.js')
β β β β β β
const routes = {
'./files/a.js': function () {
return import('./files/a.js')
},
'./files/b.js': function () {
return import('./files/b.js')
},
'./files/c.js': function () {
return import('./files/c.js')
},
'./files/d.js': function () {
return import('./files/d.js')
},
}
`
Configure importAll to transform import path before generating imports
babel-plugin-macros.config.js:
`javascript`
module.exports = {
importAll: {
transformModulePath(modulePath, importingPath) {
const projectRoot = path.join(__dirname, '../../')
const modulePathWithoutExt = modulePath.replace(/\.js$/, '')
const absolutePath = path.resolve(
path.dirname(importingPath),
modulePathWithoutExt,
)
const pathRelativeToRoot = path.relative(projectRoot, absolutePath)
return pathRelativeToRoot
},
},
}
`javascript`
import importAll from 'import-all.macro'
const a = importAll.sync('./files/*.js')
β β β β β β
import * as _filesA from './files/a'
import * as _filesB from './files/b'
import * as _filesC from './files/c'
import * as _filesD from './files/d'
const a = {
'./files/a': _filesA,
'./files/b': _filesB,
'./files/c': _filesC,
'./files/d': _filesD,
}
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.
[Sunil Pai's tweet][sunil-tweet]
I'm not aware of any, if you are please [make a pull request][prs] and add it
here!
_Looking to contribute? Look for the [Good First Issue][good-first-issue]
label._
Please file an issue for bugs, missing documentation, or unexpected behavior.
[See Bugs][bugs]
Please file an issue to suggest new features. Vote on feature requests by adding
a π. This helps maintainers prioritize what to work on.
[See Feature Requests][requests]
Thanks goes to these people ([emoji key][emojis]):
Kent C. Dodds π» π π β οΈ | Jonathan Neal π | RafaΕ RuciΕski π π» | Justin Dorfman π | MichaΓ«l De Boey π» | Jianhua Cheng π» β οΈ π |
This project follows the [all-contributors][all-contributors] specification.
Contributions of any kind welcome!
MIT
[npm]: https://www.npmjs.com
[node]: https://nodejs.org
[build-badge]: https://img.shields.io/travis/kentcdodds/import-all.macro.svg?style=flat-square
[build]: https://travis-ci.org/kentcdodds/import-all.macro
[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/import-all.macro.svg?style=flat-square
[coverage]: https://codecov.io/github/kentcdodds/import-all.macro
[version-badge]: https://img.shields.io/npm/v/import-all.macro.svg?style=flat-square
[package]: https://www.npmjs.com/package/import-all.macro
[downloads-badge]: https://img.shields.io/npm/dm/import-all.macro.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/import-all.macro
[license-badge]: https://img.shields.io/npm/l/import-all.macro.svg?style=flat-square
[license]: https://github.com/kentcdodds/import-all.macro/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/kentcdodds/import-all.macro/blob/master/other/CODE_OF_CONDUCT.md
[macros-badge]: https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square
[babel-plugin-macros]: https://github.com/kentcdodds/babel-plugin-macros
[emojis]: https://github.com/all-contributors/all-contributors#emoji-key
[all-contributors]: https://github.com/all-contributors/all-contributors
[bugs]: https://github.com/kentcdodds/import-all.macro/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug
[requests]: https://github.com/kentcdodds/import-all.macro/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement
[good-first-issue]: https://github.com/kentcdodds/import-all.macro/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22
[glob]: https://www.npmjs.com/package/glob
[sunil-tweet]: https://twitter.com/threepointone/status/908290510225330176