全面认识ECMAScript模块_vlambda技术博客

vlambda
2021-05-25

全面认识ECMAScript模块

关于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/[email protected]/es/redux.mjs";

const store = createStore(/* do stuff */)

浏览器中的ECMAScript模块

现代浏览器支持ES模块，尽管有一些注意事项。要加载一个模块，请在脚本标签的type属性中添加模块。

<!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是同一个项目文件夹下的一个简单模块。

export function appendResult(element) {
  const result = Math.random();
  element.innerText += result;
}

虽然可以直接在浏览器中使用ES模块，但现在捆绑JavaScript应用的任务仍然是webpack等工具的专属，以获得最大的灵活性、代码拆分和对旧浏览器的兼容性。

动态导入

ES模块是静态的，这意味着我们无法在运行时更改导入。有了2020年登陆的动态导入，我们可以根据用户的交互动态加载我们的代码（webpack在ECMAScript 2020中提供动态导入功能之前就已经提供了）。

考虑一个简单的HTML，它可以加载一个脚本。

<!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模块。

// 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();
  });

最后

看完点个赞，分享一下吧，让更多的朋友能够看到。如果你喜欢前端开发博客的分享，就给公号标个星吧，这样就不会错过我的文章了。全面认识ECMAScript模块

好文和朋友一起看~

vlambda博客
学习文章列表