5

How do I export as default multiple imported modules?

I could do something like the code below, but if I were to import multiple files the boilerplate could grow quickly. Is there a shorthand way to achieve this? 

import Foo from './Foo'
import Bar from './Bar'
//...

export default {
    Foo,
    Bar
    //...
}

Note that in my code above, I'm not exporting multiple values. I'm importing multiple values, accumulating them, and exporting them as a single object. I intend to refer to the reexported values by Baz.Foo or Baz.Bar, assuming the code above is Baz.js.

t.c
  • 623
  • 5
  • 19
  • Read this page: https://stackoverflow.com/questions/38340500/export-multiple-classes-in-es6-modules – R.tbr Jul 25 '19 at 08:22
  • Finally found a shorthand way that works with default exports. I'm using it in my application now :) – dandeto Nov 05 '19 at 06:24

4 Answers4

2

Instead of accumulating boilerplate from importing lots of files to simply re-export them, you can do this:

// In library.js
export { default as Foo } from "./Foo.js";
export { default as Bar } from "./Bar.js";

// In new_file.js
import { Foo, Bar } from "../lib/library.js"
var phooey = new Foo();

This selects whatever you are exporting as default and gives it an alias.

dandeto
  • 756
  • 6
  • 13
  • This is how I intend to use the reexported modules. However, in `library.js`, the import/export code still have to be repeated twice. My question is whether there's an easier way to do that, e.g. `export default {Foo from './Foo', 'Bar' from './Bar'}` – t.c Jul 25 '19 at 08:21
  • I updated my answer. Sorry I misunderstood initially! Import/export code isn’t repeated twice in my new example. – dandeto Jan 03 '20 at 19:00
1

export default is not meant to be used with multiple exports: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#Using_the_default_export

If we want to export a single value or to have a fallback value for your module, you could use a default export

You should use named exports like this:

export {
    Foo,
    Bar
    //...
}
Álvaro Tihanyi
  • 1,062
  • 1
  • 11
  • 18
  • In my code above, I'm not exporting multiple values. I'm importing multiple values, accumulating them, and exporting them as a single object. What I intended was to refer to the reexported values by `Baz.Foo` or `Baz.Bar`, assuming the code above is `Baz.js` – t.c Jul 25 '19 at 08:18
  • Then group your imports in an object and export that object as default. – Álvaro Tihanyi Jul 25 '19 at 08:26
  • that's what I did. I just didn't give that object an identifier. E.g. `const toBeExported={Foo, Bar}; export default toBeExported` – t.c Jul 29 '19 at 02:19
1

In es6 there are two types of exports named and default exports.

Since you want to export default assign all the modules to an object like below

Const modules = {Foo,  Bar }
export default modules;

Then in other files use like below

Import modules from 'path/yourfiles'
modules.Foo.xxx
modules.Bar.xxx
ajaykumar mp
  • 487
  • 5
  • 12
0
import * as name from "module-name";

This will be a great fit for your application. And when you want to access the object, you can use

name.object = ...;

And let me know, if it is right.

WebDeveloperReact
  • 46
  • 2