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' 

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.

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

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.

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' 

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 

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() 

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'; 

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; 

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

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 }); })); 

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!