365

With ES6, I can import several exports from a file like this:

import {ThingA, ThingB, ThingC} from 'lib/things';

However, I like the organization of having one module per file. I end up with imports like this:

import ThingA from 'lib/things/ThingA';
import ThingB from 'lib/things/ThingB';
import ThingC from 'lib/things/ThingC';

I would love to be able to do this:

import {ThingA, ThingB, ThingC} from 'lib/things/*';

or something similar, with the understood convention that each file contains one default export, and each module is named the same as its file.

Is this possible?

3
  • 1
    This is possible. Please see module documentation for babel babeljs.io/docs/learn-es2015 ... guoted "import {sum, pi} from "lib/math";". The accepted answer is no more valid. Please update it. Aug 4, 2015 at 23:04
  • 8
    @kresli I don't think you understand the question. In the docs, lib/math is a file containing multiple exports. In my question, lib/math/ is a directory containing several files, each containing one export.
    – 000
    Aug 7, 2015 at 0:26
  • 2
    ok, I see. In that case Bergi is correct. Sorry Aug 7, 2015 at 22:26

14 Answers 14

311

I don't think this is possible, but afaik the resolution of module names is up to module loaders so there might a loader implementation that does support this.

Until then, you could use an intermediate "module file" at lib/things/index.js that just contains

export * from 'ThingA';
export * from 'ThingB';
export * from 'ThingC';

and it would allow you to do

import {ThingA, ThingB, ThingC} from 'lib/things';
21
  • 7
    Thanks for the help. I was able to get this working with index.js looking like: import ThingA from 'things/ThingA'; export {ThingA as ThingA}; import ThingB from 'things/ThingB'; export {ThingB as ThingB};. Other incantations in index.js wouldn't budge.
    – 000
    Apr 18, 2015 at 21:02
  • 2
    Hm, export * from should work. Have you tried …from './ThingA' or export ThingA from …? What module loader are you using?
    – Bergi
    Apr 18, 2015 at 21:11
  • 8
    Yes, your original answer did work if each ThingA.js, ThingB.js, each exported named exports. Spot on.
    – 000
    Apr 18, 2015 at 21:30
  • 1
    Do you have to specify the index file or can you specify just the folder and index.js will be loaded instead?
    – Zorgatone
    May 11, 2016 at 10:06
  • 2
    @RodrigoMata No, it really just provides this grouping (and defined evaluation order, but that's rarely needed).
    – Bergi
    Dec 28, 2019 at 19:03
170

Just a variation on the theme already provided in the answer, but how about this:

In a Thing,

export default function ThingA () {}

In things/index.js,

export {default as ThingA} from './ThingA'
export {default as ThingB} from './ThingB'
export {default as ThingC} from './ThingC'

Then to consume all the things elsewhere,

import * as things from './things'
things.ThingA()

Or to consume just some of things,

import {ThingA,ThingB} from './things'
11
  • Wanna have a look at @wolfbiter's answer? Not sure why he claims parenthesis don't work.
    – Bergi
    Aug 4, 2015 at 23:20
  • @Bergi Yeah agree, I don't think wolfbiter's is valid ES6. Maybe he's using an old version of Babel, or some other transpiler? Aug 5, 2015 at 15:18
  • How is this being transpiled? Importing a directory doesn't resolve to index.js for me. I'm using SystemJs + Babel
    – user2486953
    Dec 30, 2015 at 20:55
  • 3
    Can't you simply type export ThingA from './ThingA' instead of export {default as ThingA} from './ThingA' Apr 2, 2016 at 11:01
  • 3
    does this take advantage of three shaking? if I do import {ThingA} from './things' will also ThingB and ThingC be added to the bundle?
    – Giorgio
    Jun 1, 2019 at 8:17
97

The current answers suggest a workaround but it's bugged me why this doesn't exist, so I've created a babel plugin which does this.

Install it using:

npm i --save-dev babel-plugin-wildcard

then add it to your .babelrc with:

{
    "plugins": ["wildcard"]
}

see the repo for detailed install info


This allows you to do this:

import * as Things from './lib/things';

// Do whatever you want with these :D
Things.ThingA;
Things.ThingB;
Things.ThingC;

again, the repo contains further information on what exactly it does, but doing it this way avoids creating index.js files and also happens at compile-time to avoid doing readdirs at runtime.

Also with a newer version you can do exactly like your example:

 import { ThingsA, ThingsB, ThingsC } from './lib/things/*';

works the same as the above.

7
  • 11
    Warning, I'm having severe issues with this plugin. Problems probably come from its internal caching, you will be pulling your hair out, when your code will be perfect, but your script won't work properly because you added file to ./lib/things; and it is not being picked up. The problems it causes are ridiculous. I just witnessed situation, when changing file with import * makes babel to pick up added file, but changing it back, brings problem back, like it reuses cache from before the change. Use with caution. Sep 23, 2017 at 12:42
  • @ŁukaszZaroda babel has an internal cache at ~/.babel.json which causes this weird behavior. Also if you are using like a watcher or a hot reloader you have to save the new file so it’ll be recompiled with the new directory listing
    – Downgoat
    Sep 23, 2017 at 14:18
  • @Downgoat so how to overcome this except for deleting babel's cache? And btw. I don't think your comment is correct. I have babel's caching disabled and had such a huge problems with that plugin. Totally not recommend it
    – SOReader
    Oct 20, 2017 at 14:28
  • 1
    Btw to anyone having further issues, add bpwc clear-cache because webpack and other build processes will still silently cache
    – Downgoat
    Jun 8, 2018 at 16:44
  • This is a great idea but I wasn't able to get it to work either. Possibly a conflict with my flowtyped code, I'm not sure, but I was getting `ReferenceError: Foo is not defined' no matter how I structured the imports.
    – jlewkovich
    Jun 15, 2019 at 18:51
38

You now can use async import():

import fs = require('fs');

and then:

fs.readdir('./someDir', (err, files) => {
 files.forEach(file => {
  const module = import('./' + file).then(m =>
    m.callSomeMethod();
  );
  // or const module = await import('file')
  });
});
5
  • 5
    Dynamic imports are nice like that. They sure didn't exist when the question was asked. Thanks for the answer.
    – 000
    Mar 7, 2019 at 18:19
  • I'm having trouble figuring out where this would go. Would this be found in the index.js file to load all files in the directory? Instead of import('file') can you also do export * from 'file'? A little help? Thanks! May 28, 2021 at 2:46
  • This can be in some bootstrap method where you want to register all routes from controller-files for example.
    – mr_squall
    May 28, 2021 at 3:35
  • This answer helped me. Since it includes Node.js code, I'll give some Deno code as a supplement. const directory = new URL(".", import.meta.url).pathname; const fileItr = Deno.readDirSync(directory); const modulePromises = [...fileItr] .map((fileInfo) => import(`${directory}${fileInfo.name}`)); const modules = await Promise.all(modulePromises);
    – Marcus
    Aug 15, 2021 at 3:25
  • In my previous comment I gave some Deno code. for async import. That code worked for me, but it felt slow. In my case I had 7 files, and when I switched from async import to the barrel file approach (index.ts), my it took 0.5 seconds instead of >16 seconds.
    – Marcus
    Apr 22, 2022 at 16:41
28

Great gugly muglys! This was harder than it needed to be.

Export one flat default

This is a great opportunity to use spread (... in { ...Matters, ...Contacts } below:

// imports/collections/Matters.js
export default {           // default export
  hello: 'World',
  something: 'important',
};
// imports/collections/Contacts.js
export default {           // default export
  hello: 'Moon',
  email: '[email protected]',
};
// imports/collections/index.js
import Matters from './Matters';      // import default export as var 'Matters'
import Contacts from './Contacts';

export default {  // default export
  ...Matters,     // spread Matters, overwriting previous properties
  ...Contacts,    // spread Contacts, overwriting previosu properties
};

// imports/test.js
import collections from './collections';  // import default export as 'collections'

console.log(collections);

Then, to run babel compiled code from the command line (from project root /):

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 
(trimmed)

$ npx babel-node --presets @babel/preset-env imports/test.js 
{ hello: 'Moon',
  something: 'important',
  email: '[email protected]' }

Export one tree-like default

If you'd prefer to not overwrite properties, change:

// imports/collections/index.js
import Matters from './Matters';     // import default as 'Matters'
import Contacts from './Contacts';

export default {   // export default
  Matters,
  Contacts,
};

And the output will be:

$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
  Contacts: { hello: 'Moon', email: '[email protected]' } }

Export multiple named exports w/ no default

If you're dedicated to DRY, the syntax on the imports changes as well:

// imports/collections/index.js

// export default as named export 'Matters'
export { default as Matters } from './Matters';  
export { default as Contacts } from './Contacts'; 

This creates 2 named exports w/ no default export. Then change:

// imports/test.js
import { Matters, Contacts } from './collections';

console.log(Matters, Contacts);

And the output:

$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: '[email protected]' }

Import all named exports

// imports/collections/index.js

// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
// imports/test.js

// Import all named exports as 'collections'
import * as collections from './collections';

console.log(collections);  // interesting output
console.log(collections.Matters, collections.Contacts);

Notice the destructuring import { Matters, Contacts } from './collections'; in the previous example.

$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: '[email protected]' }

In practice

Given these source files:

/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js

Creating a /myLib/index.js to bundle up all the files defeats the purpose of import/export. It would be easier to make everything global in the first place, than to make everything global via import/export via index.js "wrapper files".

If you want a particular file, import thingA from './myLib/thingA'; in your own projects.

Creating a "wrapper file" with exports for the module only makes sense if you're packaging for npm or on a multi-year multi-team project.

Made it this far? See the docs for more details.

Also, yay for Stackoverflow finally supporting three `s as code fence markup.

11

Similar to the accepted answer but it allows you to scale without the need of adding a new module to the index file each time you create one:

./modules/moduleA.js

export const example = 'example';
export const anotherExample = 'anotherExample';

./modules/index.js

// require all modules on the path and with the pattern defined
const req = require.context('./', true, /.js$/);

const modules = req.keys().map(req);

// export all modules
module.exports = modules;

./example.js

import { example, anotherExample } from './modules'
3
  • This doesn't work for me when attempting to import as an alias in ./example.js
    – tsujp
    Oct 24, 2019 at 8:27
  • doens't works for me neither (webpack 4.41, babel 7.7) Dec 30, 2019 at 9:24
  • Works great, just one thing, this will result in a circular dependency, because index.js will call require on itself as it's in the same folder. Better approach is to have the index.js outside of modules folder and then call const req = require.context('./modules', true, /.js$/);
    – catico
    Mar 24 at 23:06
4

If you are using webpack. This imports files automatically and exports as api namespace.

So no need to update on every file addition.

import camelCase from "lodash-es";
const requireModule = require.context("./", false, /\.js$/); // 
const api = {};

requireModule.keys().forEach(fileName => {
  if (fileName === "./index.js") return;
  const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ""));
  api[moduleName] = {
    ...requireModule(fileName).default
  };
});

export default api;

For Typescript users;

import { camelCase } from "lodash-es"
const requireModule = require.context("./folderName", false, /\.ts$/)

interface LooseObject {
  [key: string]: any
}

const api: LooseObject = {}

requireModule.keys().forEach(fileName => {
  if (fileName === "./index.ts") return
  const moduleName = camelCase(fileName.replace(/(\.\/|\.ts)/g, ""))
  api[moduleName] = {
    ...requireModule(fileName).default,
  }
})

export default api
3

I've used them a few times (in particular for building massive objects splitting the data over many files (e.g. AST nodes)), in order to build them I made a tiny script (which I've just added to npm so everyone else can use it).

Usage (currently you'll need to use babel to use the export file):

$ npm install -g folder-module
$ folder-module my-cool-module/

Generates a file containing:

export {default as foo} from "./module/foo.js"
export {default as default} from "./module/default.js"
export {default as bar} from "./module/bar.js"
...etc

Then you can just consume the file:

import * as myCoolModule from "my-cool-module.js"
myCoolModule.foo()
1
  • Not working correctly in windows, generates path as a windows path ( \` instead of /) also as an improvment you may want to allow two options like --filename` && --dest to allow customizing where the created file should be stored and under wich name. Also doesn't work with filenames containing . (like user.model.js) Jan 16, 2019 at 11:01
2

Just an other approach to @Bergi's answer

// lib/things/index.js
import ThingA from './ThingA';
import ThingB from './ThingB';
import ThingC from './ThingC';

export default {
 ThingA,
 ThingB,
 ThingC
}

Uses

import {ThingA, ThingB, ThingC} from './lib/things';
1
  • 1
    It won't work. I just tried it in a react app and it returned export '...' was not found in '..... Oct 14, 2019 at 10:01
1

This is not exactly what you asked for but, with this method I can Iterate throught componentsList in my other files and use function such as componentsList.map(...) which I find pretty usefull !

import StepOne from './StepOne';
import StepTwo from './StepTwo';
import StepThree from './StepThree';
import StepFour from './StepFour';
import StepFive from './StepFive';
import StepSix from './StepSix';
import StepSeven from './StepSeven';
import StepEight from './StepEight';

const componentsList= () => [
  { component: StepOne(), key: 'step1' },
  { component: StepTwo(), key: 'step2' },
  { component: StepThree(), key: 'step3' },
  { component: StepFour(), key: 'step4' },
  { component: StepFive(), key: 'step5' },
  { component: StepSix(), key: 'step6' },
  { component: StepSeven(), key: 'step7' },
  { component: StepEight(), key: 'step8' }
];

export default componentsList;
1

You can use require as well:

const moduleHolder = []

function loadModules(path) {
  let stat = fs.lstatSync(path)
  if (stat.isDirectory()) {
    // we have a directory: do a tree walk
    const files = fs.readdirSync(path)
    let f,
      l = files.length
    for (var i = 0; i < l; i++) {
      f = pathModule.join(path, files[i])
      loadModules(f)
    }
  } else {
    // we have a file: load it
    var controller = require(path)
    moduleHolder.push(controller)
  }
}

Then use your moduleHolder with dynamically loaded controllers:

  loadModules(DIR) 
  for (const controller of moduleHolder) {
    controller(app, db)
  }
1

I was able to take from user atilkan's approach and modify it a bit:

For Typescript users;

require.context('@/folder/with/modules', false, /\.ts$/).keys().forEach((fileName => {
    import('@/folder/with/modules' + fileName).then((mod) => {
            (window as any)[fileName] = mod[fileName];
            const module = new (window as any)[fileName]();

            // use module
});

}));
1

Nodejs ? Do like this:

Create a folder with index.js, in index file, add this:

var GET = require('./GET');
var IS = require('./IS');
var PARSE = require('./PARSE');
module.exports = { ...GET, ...IS, ...PARSE};

And, in file GET.js, or IS.js export as normal:

module.exports = { /* something as you like */}

ANd now, you need only including index.js like:

const Helper = require('./YourFolder');

Helper will include all of function in YourFolder.

Good day!

-14

if you don't export default in A, B, C but just export {} then it's possible to do so

// things/A.js
export function A() {}

// things/B.js
export function B() {}

// things/C.js
export function C() {}

// foo.js
import * as Foo from ./thing
Foo.A()
Foo.B()
Foo.C()
1
  • 3
    This is not valid javascript (there's no quotes around ./thing) and even if there were, it would not work. (I tried it, and it didn't work.)
    – John Rood
    Apr 24, 2017 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.