unpkg/Skypack/ESM为何在前端流行起来!( 二 )


{"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.3KBimport { __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)}`;// 自定义代码片段传递给 workerconst worker = workerFactory(workerAddon);3.10 打包 css<link rel="stylesheet" href=https://www.isolves.com/it/cxkf/qd/2023-04-12/"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指定是否是commonjs3.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 查询来指定不同的版本:


推荐阅读