关于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 为例。

// utils.js
export function funcA() {
  return "Hello named export!";
}


export default function funcB() {
  return "Hello default export!";
}

我们这里有两个导出。

第一个是一个命名的导出，后面是一个默认的导出，表示为导出默认。

假设我们的项目文件夹中住着这个名为 utils.js 的文件，我们可以在另一个文件中导入这个模块提供的对象。

如何从ES模块导入

假设我们在项目文件夹中还有一个名为 consumer.js 的文件。要导入 utils.js 所暴露的函数，我们可以这样做。

// consumer.js
import { funcA } from "./util.js";

这种语法是一种命名的导入方式，与命名的导出方式有异曲同工之妙。

如果要导入定义为默认导出的 funcB，我们可以这样做：

// consumer.js
import funcB from "./util.js";

如果我们想在一个文件中同时导入默认导出和命名导出，我们可以将其压缩为：

// consumer.js
import 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(/* do stuff */)

浏览器中的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.js
export function funcA() {
  console.log("Hello named export!");
}


export default function funcB() {
  console.log("Hello default export!");
}

如果要动态加载这个模块，也许点击一下，我们可以这样做。

// loader.js
const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  // loads named export
  import("./util.js").then(({ funcA }) => {
    funcA();
  });
});

在这里，我们通过重构模块的对象，只加载命名的导出。

({ funcA }) => {}

ES 模块实际上就是 JavaScript 对象：我们可以重构它们的属性，也可以调用它们的任何暴露的方法。

要动态地导入一个默认的导出，我们可以这样做。

// loader.js
const btn = document.getElementById("btn");


btn.addEventListener("click", () => {
  // loads entire module
  // runs default export
  import("./util.js").then((module) => {
    module.default();
  });
});

当整体导入一个模块时，我们可以使用它的所有输出。

// loader.js
const 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();
  });

文章来源于公众号：前端开发博客

以上就是W3Cschool编程狮关于全面认识ECMAScript模块的相关介绍了，希望对大家有所帮助。