原生模块ESM

元信息

目标：掌握语言层面的模块化最终答案——ES6 原生 import/export 的浏览器用法，并用 importmap 把模块名与物理地址解耦、实现按名加载
关键概念：ESM、export、import、type="module"、importmap、按名加载
关联阶段：cp3
常见误区：以为 import 可用裸名直接引第三方库（浏览器要求物理地址，裸名须经 importmap 映射）；以为模块脚本与普通 script 行为相同（module 默认 defer、自带严格模式与独立作用域）；以为需要构建工具才能用 ESM（现代浏览器原生支持）

ESM: ES module

Ecmascript 2015（ES6）中提出了原生的模块化机制 https://caniuse.com/es6-module

javascript

// my_func.js
export function my_func() {
  /* function content goes here */
}

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

注意：此处的import语句需要指定所引js文件的具体物理地址，这在复杂场景下，不利于灵活的组织代码

importmap

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

importmap提供了一个中间层，可以实现按名加载，将物理地址隔离。它让浏览器获得了类似 Node 中"裸模块名 → node_modules 查找"的解析能力——前后端因此可以统一使用 ESM 的 import 按名引入，而各自用不同的机制把名字落到物理地址上。

参考