unpkg/Skypack/ESM为何在前端流行起来！

2023-04-11 今日头条高级前端进阶

1.什么是 esm？

esm 是将 JAVAscript 程序拆分成多个单独模块，并能按需导入的标准。和 webpack，babel 不同的是，esm 是 JavaScript 的标准功能，在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以优化加载模块，比使用库更有效率。

esm 通过 import, export 语法实现模块变量的导入和导出。同时具有以下特点：

存在模块作用域，顶层变量都定义在该作用域，外部不可见
模块脚本自动采用严格模式
模块顶层的 this 关键字返回 undefined
esm 是编译时加载，也就是只有所有 import 的模块都加载完成，才会开始执行
同一个模块如果加载多次，只会执行一次

esm 在浏览器中，可以使用 <script type="module"> 加载 JavaScript 模块脚本，包括对 nomodule 属性的支持。以下是所有主流浏览器对 esm 的支持情况：

2.esm 的全球 CDN 服务商

Unpkg vs. Skypack vs. ESM

2.1 Unpkg

UNPKG 是一个快速的全球内容交付网络，适用于 npm 上的所有内容，目前由 Michael Jackson 构建和维护，并已经开源。 UNPKG CDN 由 Cloudflare 提供支持，而 Cloudflare 是世界上最大、最快的云网络平台之一。需要注意的是：unpkg 不隶属于 npm 或者任何其他公司！

通过 UNPKG，可以使用如下 URL 快速轻松地从任何包中加载文件：

unpkg.com/:package@:version/:file

同时，UNPKG 还支持版本固定、 semver 范围或标签，查询参数设置，缓存配置等等高级配置。

2.2 Skypack

Skypack 允许从 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.前端如何使用ESM

3.1 从 URL 导入

import React from 'https://esm.sh/react@18.2.0';

还可以使用 semver 或 dist-tag 而不是固定版本号，或者完全省略版本/标签以使用最新标签：

import React from 'https://esm.sh/react';
// 18.2.0 (latest)
import React from 'https://esm.sh/react@17';
// 17.0.2
import React from 'https://esm.sh/react@next';
// 18.3.0-next-3de926449-20220927

3.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 脚本生成和更新将自动解析外部依赖项的导入映射。

{
  "imports": {
    "preact": "https://esm.sh/preact@10.7.2",
    "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.0?external=preact",
  }
}

或者，可以通过在包名称前添加 * 前缀来将所有依赖项标记为外部依赖项：

{
  "imports": {
    "preact": "https://esm.sh/preact@10.7.2",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.0",
     // *的特殊用法
    "swr": "https://esm.sh/*swr@1.3.0",
    "react": "https://esm.sh/preact@10.7.2/compat",
  }
}

导入映射还支持尾部斜杠。为了解决这个问题，esm.sh 为导入 URL 提供了一种特殊格式，允许使用带有尾部斜杠的查询参数：更改查询前缀 ? 到 & 并将其放在包版本之后。

{
  "imports": {
    "react-dom": "https://esm.sh/react-dom@18.2.0?pin=v108&dev",
    "react-dom/": "https://esm.sh/react-dom@18.2.0&pin=v108&dev/",
      // 尾部斜杠
  }
}

3.5 依赖别名

import useSWR from 'https://esm.sh/swr?alias=react:preact/compat';
// alias指定依赖别名

结合 ?deps:

import useSWR from 'https://esm.sh/swr?alias=react:preact/compat&deps=preact@10.5.14';
// deps与alias结合

3.6 Tree Shaking支持

默认情况下，esm.sh 导出一个模块及其所有导出的成员。但是，如果只想导入一组特定的成员，则可以通过向导入语句添加 ?exports=foo,bar 查询来指定导出。

import { __await, __rest } from 'https://esm.sh/tslib'; 
// 导入大小7.3KB
import { __await, __rest } from 'https://esm.sh/tslib?exports=__await,__rest'; 
// 导入文件大小 489B

通过使用此功能，可以利用 esbuild 的 tree shaking 获得更小的包大小。请注意，此功能仅支持 ESM 模块，而不支持 CJS 模块。

3.7 打包模式

import { Button } from 'https://esm.sh/antd?bundle';
// bundle特殊处理

在打包模式下，除了对等依赖项（peer dependencies）之外，所有依赖项都被打包到一个 JS 文件中。

3.8 开发模式

import React from 'https://esm.sh/react?dev';
// 通过dev指定是否开发模式

使用 ?dev 选项，esm.sh 构建一个模块，其中 process.env.NODE_ENV 设置为“development”或基于 package.json 的导出字段中的条件指定 development，这对于在开发和生产中具有不同行为的库很有用。例如，React 将在开发模式下使用不同的警告消息。

3.9 ESBuild 选项

默认情况下，esm.sh 检查 User-Agent 标头以确定构建目标。还可以通过添加 ?target 来指定目标，可用的目标有：es2015 - es2022、esnext、deno 和 denonext。

import React from 'https://esm.sh/react?target=es2020';
import React from 'https://esm.sh/react?keep-names';
// 保持名称
import React from 'https://esm.sh/react?ignore-annotations';
// 忽略注释

Web Worker esm.sh 支持 ?worker 查询以将模块加载为 Web Worker：

import workerFactory from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker?worker';
const worker = workerFactory();
// worker后缀表示放在web worker中

可以在调用工厂函数时将一些自定义代码片段传递给 worker：

const workerAddon = `
self.onmessage = function (e) {
  console.log(e.data)
}
`;
// 自定义代码片段传递给 worker
const worker = workerFactory(workerAddon);

3.10 打包 css

<link rel="stylesheet" href="https://esm.sh/monaco-editor?css">
 // 通过css查询参数

这仅在包直接在 JS 中导入 CSS 文件时有效。

3.11 指定 CJS 导出

如果收到类似 ...not provide an export named... 的错误，这意味着 esm.sh 无法正确解析模块的 CJS 导出。可以添加 ?cjs-exports=foo,bar 查询以指定导出名称：

import { N.NETyRing, NinetyRingWithBg } from "https://esm.sh/react-svg-spinners@0.3.1?cjs-exports=NinetyRing,NinetyRingWithBg
// 通过cjs指定是否是commonjs

3.12 Deno 兼容性

esm.sh 是一个 Deno 友好的 CDN，解析 Node 的内置模块（如 fs、os 等），使其与 Deno 兼容。

import postcss from "https://esm.sh/postcss"
import autoprefixer from "https://esm.sh/autoprefixer"
// deno兼容
const { css } = await postcss([ autoprefixer ]).process(`
  backdrop-filter: blur(5px);
  user-select: none;
.async()

对于使用 deno < 1.31 的用户，esm.sh 使用 deno.land/std@0.177.0/node 作为节点兼容层。可以通过添加 ?deno-std=$VER 查询来指定不同的版本：

import postcss from 'https://esm.sh/postcss?deno-std=0.128.0';
// deno-std指定deno版本

3.13 X-Typescript-Types 标头

Deno 通过 X-TypeScript-Types 标头支持在其 package.json 文件中具有 types 字段的模块的类型定义。这使得在 Deno 中使用这些模块时可以进行类型检查和自动完成。

如果 X-TypeScript-Types 标头提供的类型定义不正确，可以通过将 ?no-dts 查询添加到模块导入 URL 来禁用它：

import unescape from 'https://esm.sh/lodash/unescape?no-dts';
// no-dts禁用标头

这可以防止 X-TypeScript-Types 标头包含在网络请求中，当然也可以手动指定导入模块的类型。

4.本文总结

本文主要和大家介绍下unpkg、Skypack、ESM等为何在前端流行起来。文章从什么是 esm、esm 的全球 CDN 服务商、前端如何使用ESM等诸多维度展开。当然，因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://esm.sh/#docs

https://caniuse.com/es6-module

https://zhuanlan.zhihu.com/p/535994431

https://zhuanlan.zhihu.com/p/400573436

https://unpkg.com/

https://Github.com/mjackson/unpkg