Import Statements in ES6 from MDN docs

Question

I was going through Firefox import statements.

They have shown certain import statement like this

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

But haven't added example to help differentiate between some and their example is also sort of vague.

From the docs, There are multiple things which doesn't make sense to me.. for example how is name different from defaultExport

While default export does make sense to me, the defination of name is sort of difficult to comprehend

Explanation given by them:

The name parameter is the name of the "module object" which will be used as a kind of namespace to refer to the exports.

From the above syntax: import "module-name";

Second:

import { export as alias } from "module-name";

Also, if suppose we have multiple function which we need to export

function abc1 () {
}

function abc2 () {
} 

Will this be the correct way to export?

export abc1;
export abc2; 

And then if we import, how would we attach variable to it? Is this where statement like this come in?

import { export as alias } from "module-name";

Answer 1

Given this module module-name:

// module-name.js
export default function foo(){ console.log("foo");}
export function bar(){ console.log("bar");}
console.log("hello world");

Consider the following cases which have been tested in node.js v9.11.1 using the command node --experimental-modules some-importer.mjs:

---

Importing the default export

// import defaultExport from "module-name";
import fizzbuzz from "module-name";

Only the default export will be available thus:

• fizzbuzz (which is foo) is available
• bar is not available
• console.log(hello world) will have been run

---

Importing all exports using * wildcard

import * as name from "module-name";

All exports are available but attached to an Object identified as name:

• foo is not available
• bar is not available
• name.foo is not available (though you think it would be)
• name.bar is available
• console.log(hello world) will have been run

---

Importing an identified export

// import { export } from "module-name";
import { bar } from "module-name"

Only the identified export is available:

• foo is not available
• bar is available
• console.log(hello world) will have been run

---

Importing an identified export as an alias

// import { export as alias } from "module-name";
import { bar as mybar } from "module-name";

Only the identified export is available and only as the identified alias:

• foo is not available
• bar is not available
• mybar (which is bar) is available
• console.log(hello world) will have been run

---

Importing the default export and using the * wildcard

// import defaultExport, * as name from "module-name";
import fizzbuzz, * as name from "module-name";

The default item from the module can be referenced as defaultExport and all other exported items are attached to name

• fizzbuzz (which is foo) is available
• bar is not available
• name.bar is available
• console.log(hello world) will have been run

---

No actual identified imports

import "module-name";

The module is loaded, but nothing is actually available in the module that imported. This means that file runs but nothing is exposed

• foo is not available
• bar is not available
• console.log(hello world) will have been run

Answer 2

how is name different from defaultExport?

name is an object that holds all the exported values as exported key/values, except for the default export, which will be in defaultExport. If you would export the following from a file:

export default function main() {}
export function helper1() {}
export function helper2() {}

Then you could import main as the default import:

import main from "file";

That won't import the helpers. For that you would use * as:

import * as helpers from "file";
helpers.helper1();

And then if we import, how would we attach variable to it?

They get attached to the same name they were exported with, so to only import one of the above helpers:

import { helper1 } from "file";
helper1();

If you want to rename that import because it is missleading / clashing, then the as syntax comes in:

import { helper1 as someOther } from "file";
someOther();