import

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";
import("/module-name.js").then(module => {}) //  

defaultExport

, ( ) .

module-name

. .js .js. ; . .

name

, , .

export, exportN

, .

alias, aliasN

, .

name , , . export , import * as name . .

myModule , , /modules/my-module.js.

import * as myModule from "/modules/my-module.js";

, ( "myModule") . , doAllTheAmazingThings(), :

myModule.doAllTheAmazingThings();

, myExport, my-module ( ), ( export), myExport .

import { myExport } from "/modules/my-module.js";

foo bar .

import { foo, bar } from "/modules/my-module.js";

, . , shortName .

import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";

, , .

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short,
} from "/modules/my-module.js";

, -. , .

import "/modules/my-module.js";

export ( , , .). import .

:

import myDefault from "/modules/my-module.js";

( ). , . :

import myDefault, * as myModule from "/modules/my-module.js";
// myModule    

import myDefault, { foo, bar } from "/modules/my-module.js";
//    

, .

:

• my-module.js:

  js

  export let a = 2;
  export let b = 3;
  

• main.js:

  js

  import { a, b } from "/modules/my-module.js";
  a = 5;
  b = 6;
  // Uncaught TypeError: Assignment to constant variable.
  

.

:

• my-module.js:

  js

  export let obj = { a: 2, b: 4 };
  

• main.js:

  js

  import { obj } from "/modules/my-module.js";
  
  obj.a = 1;
  obj.b = 4;
  

, import , , .

import . import() Promise.

import("/modules/my-module.js").then((module) => {
  //  -  
});

Promise, await

let module = await import("/modules/my-module.js");

, , , , .. Function.prototype , , .call, .apply .bind

AJAX JSON.

: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText);
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, (data) => callback(JSON.parse(data)));
}

: main.js

import { getUsefulContents } from "/modules/file.js";

getUsefulContents("http://www.example.com", (data) => {
  doSomethingUseful(data);
});

, ( , ), . - . import() await.

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", (e) => {
    e.preventDefault();

    import("/modules/my-module.js")
      .then((module) => {
        module.loadPageInto(main);
      })
      .catch((err) => {
        main.textContent = err.message;
      });
  });
}

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"