82

I've seen public exports of ES6 modules done in both of the following ways:

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };
  1. Are both of these valid?
  2. If so, why do they both exist?
  3. Are there other valid options for module exports using ES6 syntax?

I'm surprised I haven't been able to find the answer with my googlefu. I'm concerned only with ES6 modules, not CommonJS, RequireJS, AMD, Node, etc.

kdbanman
  • 10,161
  • 10
  • 46
  • 78
  • 3
    I think the difference is `import x from y` vs `import {x} from y` – elclanrs Aug 25 '14 at 21:12
  • See also [When should I use curly braces for ES6 import?](http://stackoverflow.com/q/36795819/1048572) and [export const vs export default](http://stackoverflow.com/q/33611812/1048572) – Bergi Apr 01 '17 at 14:28

3 Answers3

184

A year and some later, here is the best information I've found on the subject.

There are 4 types of exports. Here are usage examples of each, along with some imports that use them:

Export Syntax

// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

Import Syntax

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";

// just import
import "foo";

Source.

kdbanman
  • 10,161
  • 10
  • 46
  • 78
  • 9
    Great list, but can you expand on what each type does, and what the differences are? – Dan Dascalescu Oct 10 '16 at 10:09
  • 2
    That's an excellent idea. I want to be comprehensive with each explanation, but I haven't touched ES6 in a little while so I'm a little rusty. It'll have to wait until I'm back in ES6 land so I can be sure of what I'm talking about. – kdbanman Oct 10 '16 at 17:03
41

Both of these are valid.

Method 1 provides named exports. The key here is that you can export more than one thing. This should be used instead of exporting an object with multiple properties. When you import a module with named exports, use import {a, b} from c.

Method 2 provides the default export. There can be only one default export. This is primarily used when you are exporting a single thing, like a class, or a single function that you expect to be used without any additional support. When you import a module with a default export, use import d from c.

Note that you can use both! so if you have a major, primary function with a handful of occasionally used helpers, you can export the helpers, and export default the primary. When you import a module and need both kinds of exports, use import d, {a, b} from c.

One other option is that you can get named exports by listing them at the end of your module, like so: export {a,b,c}. You can also rename them export {a as $a, b as c}.

I got all of this from this article, which is the best source for up-to-date es6 module information that I've been able to find.

Sean McMillan
  • 10,058
  • 6
  • 55
  • 65
3
  1. Are both of these valid?

No, export function () { return answer; }; is invalid, either you use default, or you add a name to that function declaration.

  1. If so, why do they both exist?

They don't :)

  1. Are there other valid options for module exports using ES6 syntax?

You can see a lot of valid options here: https://github.com/eslint/espree/pull/43

caridy
  • 244
  • 2
  • 5