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         


        

Answer 1

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

Answer 2

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