这篇“ECMAScript模块如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ECMAScript模块如何使用”文章吧。
什么是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 为例。
// utils.jsexport function funcA() { return "Hello named export!";}export default function funcB() { return "Hello default export!";}我们这里有两个导出。
第一个是一个命名的导出，后面是一个默认的导出，表示为导出默认。
假设我们的项目文件夹中住着这个名为 utils.js 的文件，我们可以在另一个文件中导入这个模块提供的对象。
如何从ES模块导入
假设我们在项目文件夹中还有一个名为 consumer.js 的文件。要导入 utils.js 所暴露的函数，我们可以这样做。
// consumer.jsimport { funcA } from "./util.js";这种语法是一种命名的导入方式，与命名的导出方式有异曲同工之妙。
如果要导入定义为默认导出的 funcB，我们可以这样做：
// consumer.jsimport funcB from "./util.js";如果我们想在一个文件中同时导入默认导出和命名导出，我们可以将其压缩为：
// consumer.jsimport funcB, { funcA } from "./util.js";funcB();funcA();我们也可以用 star 导入整个模块。
import * as myModule from "./util.js";myModule.funcA();myModule.default();要注意，在这种情况下，必须显式调用默认导出。
要从远程模块导入。
import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";const store = createStore()浏览器中的ECMAScript模块
现代浏览器支持 ES 模块，尽管有一些注意事项。要加载一个模块，请在脚本标签的 type 属性中添加模块。
ECMAScript modules in the browser<p id="el">The result is: </p> import { appendResult } from "./myModule.js"; const el = document.getElementById("el"); appendResult(el);这里 myModule.js 是同一个项目文件夹下的一个简单模块。
export function appendResult(element) { const result = Math.random(); element.innerText += result;}虽然可以直接在浏览器中使用ES模块，但现在捆绑 JavaScript 应用的任务仍然是 webpack 等工具的专属，以获得最大的灵活性、代码拆分和对旧浏览器的兼容性。
动态导入
ES 模块是静态的，这意味着我们无法在运行时更改导入。有了2020年登陆的动态导入，我们可以根据用户的交互动态加载我们的代码（webpack在ECMAScript 2020中提供动态导入功能之前就已经提供了）。
考虑一个简单的 HTML，它可以加载一个脚本。
Dynamic imports<button id="btn">Load!</button>也可以考虑用几个导出的 JavaScript 模块。
// util.jsexport function funcA() { console.log("Hello named export!");}export default function funcB() { console.log("Hello default export!");}如果要动态加载这个模块，也许点击一下，我们可以这样做。
// loader.jsconst btn = document.getElementById("btn");btn.addEventListener("click", () => { // loads named export import("./util.js").then(({ funcA }) => { funcA(); });});在这里，我们通过重构模块的对象，只加载命名的导出。
({ funcA }) => {}ES 模块实际上就是 JavaScript 对象：我们可以重构它们的属性，也可以调用它们的任何暴露的方法。
要动态地导入一个默认的导出，我们可以这样做。
// loader.jsconst btn = document.getElementById("btn");btn.addEventListener("click", () => { // loads entire module // runs default export import("./util.js").then((module) => { module.default(); });});当整体导入一个模块时，我们可以使用它的所有输出。
// loader.jsconst btn = document.getElementById("btn");btn.addEventListener("click", () => { // loads entire module // uses everything import("./util.js").then((module) => { module.funcA(); module.default(); });});还有一种常见的动态导入方式，我们在文件的顶部提取逻辑。
const loadUtil = () => import("./util.js");const btn = document.getElementById("btn");btn.addEventListener("click", () => { //});在这里，loadUtil 将返回一个 Promise，准备进行链锁。
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。
{ "name": "Jules", "age": 43}现在，你想动态地导入这个文件，以响应一些用户的交互。
由于JSON文件导出的只是一个默认的导出，它不是一个函数，所以你只能像这样访问默认的导出。
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。
const { name, age } = module.default;使用async/await动态导入
import()语句返回的总是一个Promise，这意味着我们可以对它使用async/await。
const loadUtil = () => import("./util.js");const btn = document.getElementById("btn");btn.addEventListener("click", async () => { const utilsModule = await loadUtil(); utilsModule.funcA(); utilsModule.default();});动态导入名称
当用import()导入一个模块时，你可以随心所欲地给它命名，只要保持一致即可。
import("./util.js").then((module) => { module.funcA(); module.default(); });或者：
import("./util.js").then((utilModule) => { utilModule.funcA(); utilModule.default(); });以上就是关于“ECMAScript模块如何使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
