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
• Usage
• Caveats
• Inspiration
• Other Solutions
• Contributors
• LICENSE

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][https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md] 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

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

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

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')
  },
}

importAll.deferredNamed gives an object where key is the named export and value is the dynamic import: README:4 importAll.deferredNamed gives an object where key is the named export and value is the dynamic import

import importAll from 'import-all.macro'

const routes = importAll.deferredNamed('./files/*.js')

      ↓ ↓ ↓ ↓ ↓ ↓

const routes = {
  foo: function() {
    return import('./files/a.js').then(function(res) {
      return res.foo
    })
  },
  bar: function() {
    return import('./files/b.js').then(function(res) {
      return res.bar
    })
  },
  Baz: function() {
    return import('./files/c.js').then(function(res) {
      return res.Baz
    })
  },
  A: function() {
    return import('./files/d.js').then(function(res) {
      return res.A
    })
  },
}

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

Other Solutions

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

Contributors

Thanks goes to these people (emoji key):

| Kent C. Dodds💻 📖 🚇 ⚠️ | Jonathan Neal📖 | Rafał Ruciński🐛 💻 | | :---: | :---: | :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT