ES6+ javascript module export options ES6+ javascript module export options javascript javascript

ES6+ javascript module export options


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 exportsexport 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 exportsexport 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 exportsexport {};export {foo};export {foo, bar};export {foo as bar};export {foo as default};export {foo as default, bar};// exports fromexport * 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 importsimport foo from "foo";import {default as foo} from "foo";// named importsimport {} 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 importsimport * as foo from "foo";// mixing importsimport foo, {baz as xyz} from "foo";import foo, * as bar from "foo";// just importimport "foo";

Source.


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.


  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