import-all.macro
A babel-plugin-macro that allows you to import all files that match a glob
!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
!PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc !Babel Macromacros-badgebabel-plugin-macros
The problem
You want to import all files that match aglob
without having to import them
individually.This solution
This is a babel-plugin-macrobabel-plugin-macros which allows you to import files that match a glob. It supportsimport
statements for synchronous
resolution as well as dynamic import()
for deferred resolution (for code
splitting with react router for example).Table of Contents
- π Bugs - π‘ Feature Requests
Installation
This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project'sdevDependencies
:npm install --save-dev import-all.macro
Usage
Once you've configuredbabel-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 importimport 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
importsimport 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 importsimport 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 importsbabel-plugin-macros.config.js
: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
},
},
}
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 (likeeslint-plugin-import
) will probably fail on this.Inspiration
Sunil Pai's tweetsunil-tweetOther Solutions
I'm not aware of any, if you are please make a pull requestprs and add it here!Issues
Looking to contribute? Look for the Good First Issuegood-first-issue label.π Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.See Bugsbugs
π‘ 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.See Feature Requestsrequests
Contributors β¨
Thanks goes to these people (emoji keyemojis):This project follows the all-contributorsall-contributors specification. Contributions of any kind welcome!