你真的了解ES6的那些导出细节吗？

export default

1. export default 命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 export default 命令。

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

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

export

1. export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

// export.js
export const name = "panrui";
export const age = 18;
export const address = "北京";

// import.js
import { name, age, address } from "./export";
console.log(name, age, address); // panrui 18 北京

export 与 export default 的区别

1. export 与 export default 均可用于导出常量、函数、文件、模块等
2. 你可以在其它文件或模块中通过 import 导入导出的内容
3. 在一个文件或模块中，export、import 可以有多个，export default 仅有一个
4. 通过 export 方式导出，在导入时要加{ }，export default 则不需要
5. export 可以导出变量表达式，export default 不行
6. export 导出的变量可以改名再导入，export default 不行

exports 与 module.exports 的区别

1. module.exports 初始值为一个空对象 {}
2. exports 是指向的 module.exports 的引用
3. require() 返回的是 module.exports 而不是 exports
4. exports 不能直接改变指向，而 module.exports 可以

import

1. import 命令用于加载模块，提供了一个对外接口，其他模块可以加载这个模块。

import { name, age, address } from "./export";
console.log(name, age, address); // panrui 18 北京

import()

1. import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，也会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与 import 不相同。import()类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

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

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

require

require() 方法

1. require() 方法用于加载模块，返回一个对象，这个对象代表的是模块的引用。require() 方法接受以下参数。
2. id 参数是要加载的模块的 ID，它必须是字符串，不能是表达式。require() 方法用于加载模块，返回一个对象，这个对象代表的是模块的引用。require() 方法接受以下参数。
3. 只能在 node 环境下使用

require(id);