关于ES模块，本文将提供一些详细的解读，希望对你有所帮助！
什么是ES模块？
ECMAScript模块（简称ES模块）是2015年推出的JavaScript中代码重用的机制。在高度碎片化的JavaScript模块场景中，它终于成为了标准。
在2015年之前，JavaScript还没有一个标准的代码重用机制。这方面曾有过很多标准化的尝试，导致这些年乱七八糟的碎片化。
你可能听说过AMD模块、UMD或者CommonJS。没有明显的赢家。终于，随着ECMAScript 2015，ES模块登陆语言。
我们现在有了一个 "官方 "的模块系统。
ECMAScript模块无处不在？
理论上，ECMAScript模块应该普遍适用于所有JavaScript环境。实际上，浏览器仍然是ES模块的主要目标。
2020年5月，Node.js v12.17.0发货时，支持ECMAScript模块，没有标志。这意味着我们现在可以在Node.js中使用导入和导出，而无需任何额外的命令行标志。
在ECMAScript模块在任何JavaScript环境中普遍工作之前，还有很长的路要走，但方向是正确的。
ES模块是怎样的？
一个ES模块就是一个简单的文件，我们可以声明一个或多个出口。以这个虚构的utils.js为例。
代码语言：javascript复制// utils.js
export function funcA() {
return "Hello named export!";
}
export default function funcB() {
return "Hello default export!";
}我们这里有两个导出。
第一个是一个命名的导出，后面是一个默认的导出，表示为导出默认。
假设我们的项目文件夹中住着这个名为utils.js的文件，我们可以在另一个文件中导入这个模块提供的对象。
如何从ES模块导入
假设我们在项目文件夹中还有一个名为consumer.js的文件。要导入utils.js所暴露的函数，我们可以这样做。
代码语言：javascript复制// consumer.js
import { funcA } from "./util.js";这种语法是一种命名的导入方式，与命名的导出方式有异曲同工之妙。
如果要导入定义为默认导出的funcB，我们可以这样做：
代码语言：javascript复制// consumer.js
import funcB from "./util.js";如果我们想在一个文件中同时导入默认导出和命名导出，我们可以将其压缩为：
代码语言：javascript复制// consumer.js
import funcB, { funcA } from "./util.js";
funcB();
funcA();我们也可以用star导入整个模块。
代码语言：javascript复制import * as myModule from "./util.js";
myModule.funcA();
myModule.default();要注意，在这种情况下，必须显式调用默认导出。
要从远程模块导入。
代码语言：javascript复制import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";
const store = createStore(/* do stuff */)浏览器中的ECMAScript模块
现代浏览器支持ES模块，尽管有一些注意事项。要加载一个模块，请在脚本标签的type属性中添加模块。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECMAScript modules in the browser</title>
</head>
<body>
<p id="el">The result is: </p>
</body>
<script type="module">
import { appendResult } from "./myModule.js";
const el = document.getElementById("el");
appendResult(el);
</script>
</html>这里myModule.js是同一个项目文件夹下的一个简单模块。
代码语言：javascript复制export function appendResult(element) {
const result = Math.random();
element.innerText = result;
}虽然可以直接在浏览器中使用ES模块，但现在捆绑JavaScript应用的任务仍然是webpack等工具的专属，以获得最大的灵活性、代码拆分和对旧浏览器的兼容性。
动态导入
ES模块是静态的，这意味着我们无法在运行时更改导入。有了2020年登陆的动态导入，我们可以根据用户的交互动态加载我们的代码（webpack在ECMAScript 2020中提供动态导入功能之前就已经提供了）。
考虑一个简单的HTML，它可以加载一个脚本。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic imports</title>
</head>
<body>
<button id="btn">Load!</button>
</body>
<script src="loader.js"></script>
</html>也可以考虑用几个导出的JavaScript模块。
代码语言：javascript复制// util.js
export function funcA() {
console.log("Hello named export!");
}
export default function funcB() {
console.log("Hello default export!");
}如果要动态加载这个模块，也许点击一下，我们可以这样做。
代码语言：javascript复制// loader.js
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// loads named export
import("./util.js").then(({ funcA }) => {
funcA();
});
});在这里，我们通过重构模块的对象，只加载命名的导出。
代码语言：javascript复制({ funcA }) => {}ES模块实际上就是JavaScript对象：我们可以重构它们的属性，也可以调用它们的任何暴露的方法。
要动态地导入一个默认的导出，我们可以这样做。
代码语言：javascript复制// loader.js
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// loads entire module
// runs default export
import("./util.js").then((module) => {
module.default();
});
});当整体导入一个模块时，我们可以使用它的所有输出。
代码语言：javascript复制// loader.js
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// loads entire module
// uses everything
import("./util.js").then((module) => {
module.funcA();
module.default();
});
});还有一种常见的动态导入方式，我们在文件的顶部提取逻辑。
代码语言：javascript复制const loadUtil = () => import("./util.js");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
//
});在这里，loadUtil将返回一个Promise，准备进行链锁。
代码语言：javascript复制const loadUtil = () => import("./util.js");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
loadUtil().then(module => {
module.funcA();
module.default();
});
});动态导入看起来很好，但是它们有什么用呢？
通过动态导入，我们可以拆分我们的代码，只在合适的时刻加载重要的内容。在动态导入登陆JavaScript之前，这种模式是webpack这个模块捆绑器的专属。
像React和Vue这样的前端库，就大量使用了通过动态导入进行代码拆分的方式，在响应事件时加载分块代码，比如用户交互或者路由变化。
JSON文件的动态导入
假设你在代码库的某个地方有一个JSON文件person.json。
代码语言：javascript复制{
"name": "Jules",
"age": 43
}现在，你想动态地导入这个文件，以响应一些用户的交互。
由于JSON文件导出的只是一个默认的导出，它不是一个函数，所以你只能像这样访问默认的导出。
代码语言：javascript复制const loadPerson = () => import("./person.json");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
loadPerson().then(module => {
const { name, age } = module.default;
console.log(name, age);
});
});这里，我们从默认的导出中重构name和age。
代码语言：javascript复制 const { name, age } = module.default;使用async/await动态导入
import()语句返回的总是一个Promise，这意味着我们可以对它使用async/await。
代码语言：javascript复制const loadUtil = () => import("./util.js");
const btn = document.getElementById("btn");
btn.addEventListener("click", async () => {
const utilsModule = await loadUtil();
utilsModule.funcA();
utilsModule.default();
});动态导入名称
当用import()导入一个模块时，你可以随心所欲地给它命名，只要保持一致即可。
代码语言：javascript复制 import("./util.js").then((module) => {
module.funcA();
module.default();
});或者：
代码语言：javascript复制 import("./util.js").then((utilModule) => {
utilModule.funcA();
utilModule.default();
});
