---

[![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]

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][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).

Table of Contents

- Installation
- Usage
- Caveats
- Inspiration
- Other Solutions
- Issues
- 🐛 Bugs
- 💡 Feature Requests
- Contributors ✨
- LICENSE

Installation

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
`

Usage

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:3
importAll.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,
}
`

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

[Sunil Pai's tweet][sunil-tweet]

Other Solutions

I'm not aware of any, if you are please [make a pull request][prs] and add it
here!

Issues

_Looking to contribute? Look for the [Good First Issue][good-first-issue]
label._

$3

Please file an issue for bugs, missing documentation, or unexpected behavior.

[See Bugs][bugs]

$3

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]

Contributors ✨

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!

LICENSE

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