ES6——模块（module）

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

// ES6模块
import { stat, exists, readFile } from 'fs';

// profile.js
export let firstName = 'xiao';
export let lastName = 'wang';
export let age = 18;

// profile.js
let firstName = 'Michael';
let lastName = 'Jackson';
let age = 18;
export { firstName, lastName, age };

export function multiply(x, y) {
  return x * y;
};

//user.mjs
let name = 'yang'
let age =25
export {name as userName,age as userAge}
};

// 报错 直接输出 1
export 1;

// 报错 通过变量`m`，还是直接输出 1。`1`只是一个值，不是接口
var m = 1;
export m;

// 写法一
export let m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

function foo() {
  export default 'bar' // SyntaxError
}
foo()

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import { lastName as surname } from './profile.js';

import {a} from './xxx.js'

a = {}; // Syntax Error : 'a' is read-only;

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

// 正确
export default 42;

// 报错
export 42;

import _ from 'lodash';

import _, { each, forEach } from 'lodash';

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach };

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

// 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';

export { default } from 'foo';

export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;

export { default as es6 } from './someModule';

import * as someIdentifier from "someModule";
import someIdentifier from "someModule";
import someIdentifier, { namedIdentifier } from "someModule";

export * as someIdentifier from "someModule";
export someIdentifier from "someModule";
export someIdentifier, { namedIdentifier } from "someModule";

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

const path = './' + fileName;
const myModual = require(path);

import(specifier)

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

import(f())
.then(...);

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();