1.什么是 esm？esm 是将 JAVAscript 程序拆分成多个单独模块 ， 并能按需导入的标准 。和 webpack ， babel 不同的是 ， esm 是 JavaScript 的标准功能 ， 在浏览器端和 nodejs 中都已得到实现 。使用 esm 的好处是浏览器可以优化加载模块 ， 比使用库更有效率 。
esm 通过 import, export 语法实现模块变量的导入和导出 。同时具有以下特点：
- 存在模块作用域 ， 顶层变量都定义在该作用域 ， 外部不可见
- 模块脚本自动采用严格模式
- 模块顶层的 this 关键字返回 undefined
- esm 是编译时加载 ， 也就是只有所有 import 的模块都加载完成 ， 才会开始执行
- 同一个模块如果加载多次 ， 只会执行一次
文章插图
2.esm 的 全球 CDN 服务商
文章插图
Unpkg vs. Skypack vs. ESM
2.1 UnpkgUNPKG 是一个快速的全球内容交付网络 ， 适用于 npm 上的所有内容 ， 目前由 Michael Jackson 构建和维护 ， 并已经开源 。UNPKG CDN 由 Cloudflare 提供支持 ， 而 Cloudflare 是世界上最大、最快的云网络平台之一 。需要注意的是：unpkg 不隶属于 npm 或者任何其他公司！
通过 UNPKG ， 可以使用如下 URL 快速轻松地从任何包中加载文件：
unpkg.com/:package@:version/:file同时 ， UNPKG 还支持版本固定、 semver 范围或标签 ， 查询参数设置 ， 缓存配置等等高级配置 。2.2 SkypackSkypack 允许从 CDN 加载 JavaScript ， 并在没有打包器的浏览器中工作 。Skypack 的运行方式类似于 CDN ， 但有一个重要的区别：NPM 包已经针对浏览器使用进行了预优化 。
import confetti from 'https://cdn.skypack.dev/canvas-confetti';confetti();但 Skypack 功能远非如此：它还会处理代码压缩、浏览器 polyfill、gzip/brotli、HTTP/3、缓存等等诸多方面！Skypack 可永久免费用于个人和商业目的 ， 基本的 CDN 由 Cloudflare、google Cloud 和 AWS 提供支持 。
2.3 ESM快速、聪明、全球的 ESM 转化为 CDN 的平台 。ESM 支持在浏览器或者 deno 中使用 NPM 包轻松创建现代（es2015+）网络应用程序 ， 而无需任何构建工具！在撰写文本时 ， 30 天内通过 ESM 引入的模块超过了 44500K 。使用 ESM 可以按照如下方式引用模块：
import confetti from 'https://esm.sh/canvas-confetti@1.6.0';下文的所有使用方式都将基于 ESM 来展开 ， Skypack、Unpkg 等平台提供的能力、使用方式也基本相似 ， 可以在文末的参考资料中深入学习 。3.前端如何使用ESM3.1 从 URL 导入
import React from 'https://esm.sh/react@18.2.0';还可以使用 semver 或 dist-tag 而不是固定版本号 ， 或者完全省略版本/标签以使用最新标签：【unpkg/Skypack/ESM为何在前端流行起来！】
import React from 'https://esm.sh/react';// 18.2.0 (latest)import React from 'https://esm.sh/react@17';// 17.0.2import React from 'https://esm.sh/react@next';// 18.3.0-next-3de926449-202209273.2 子模块import { renderToString } from 'https://esm.sh/react-dom@18.2.0/server';或按以下方式导入非模块（js）：import 'https://esm.sh/react@18.2.0/package.json' assert { type: 'json' };3.3 指定依赖关系默认情况下 ， ESM.SH 根据 package.json 的 dependencies 字段重写导入说明符 。要指定这些依赖项的版本 ， 可以添加 ?deps=PACKAGE@VERSION 查询 。要指定多个依赖项 ， 可以用逗号分隔 ， 如下所示：?deps=react@17.0.2,react-dom@17.0.2 。import React from 'https://esm.sh/react@17.0.2';// 依赖关系使用deps指定import useSWR from 'https://esm.sh/swr?deps=react@17.0.2';3.4 指定外部依赖可以添加 ?external=foo,bar 查询来指定外部依赖项 。由于这些依赖没有被解析 ， 所以需要使用 import maps 来指定这些依赖的 URL 。如果开发者使用的是 Deno ， 则可以使用 CLI 脚本生成和更新将自动解析外部依赖项的导入映射 。
