使用CDN、ImportMap增强Vue playground

有时候只是想试一小段代码，却不想开 VS Code、建项目、装依赖；想看看 TypeScript 怎么推断类型，也不想折腾太多。

这就是各种在线「演练场」（REPL）存在的意义。

无论是 Babel、TypeScript、Vue 还是 React Native，这些在线工具帮我们快速验证思路、测试用法、甚至调试模块导入问题，效率拉满。

下面介绍一下我经常使用的Vue SFC Playground的经验，主要是在封装vue、使用antdv组件时会使用到它。

UNPKG

UNPKG 是一个基于 npm 的内容分发网络（CDN），可以让你通过 URL 快速加载 npm 包中的任意文件，适用于无需构建的前端项目或在线测试/演示。我们所有的依赖都从它这里请求。公司项目请不要使用，自己的学习项目可以使用。

基本用法

基本 URL 格式

ruby 复制代码

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

部分	说明
`:package`	npm 包名
`:version`	可选，npm 版本号或 tag
`:file`	包内的文件路径

示例：

ruby 复制代码

https://unpkg.com/preact@10.26.4/dist/preact.min.js
https://unpkg.com/react@18.3.1/umd/react.production.min.js
https://unpkg.com/three@0.174.0/build/three.module.min.js

使用 `latest` 或 semver 范围

bash 复制代码

https://unpkg.com/react@latest/umd/react.production.min.js
https://unpkg.com/preact@^10/dist/preact.min.js

不写版本默认是 latest：

ruby 复制代码

https://unpkg.com/vue/dist/vue.esm-browser.prod.js

浏览目录和元信息

⚠️ 注意：目前某些目录 URL 已无法直接列出文件列表 ，但仍支持通过 ?meta 获取 JSON 目录结构。

获取目录元信息：

ruby 复制代码

https://unpkg.com/react@18.3.1/?meta
https://unpkg.com/preact@10.26.4/src/?meta

返回示例：

json 复制代码

{
  "package": "react",
  "version": "18.3.1",
  "prefix": "/",
  "files": [
    {
      "path": "/umd/react.production.min.js",
      "type": "text/javascript",
      "size": 102393,
      "integrity": "sha256-..."
    }
  ]
}

文件路径解析规则

若不指定文件，默认会使用 package.json 中的 main 字段。
支持 exports 字段，自动解析 default 和子路径。
支持通过 ?conditions 查询参数指定条件导出。

示例：

默认导出：

arduino 复制代码

https://unpkg.com/jquery

等价于：

bash 复制代码

https://unpkg.com/jquery@<latest>/dist/jquery.js

`exports.default` 解析：

json 复制代码

"exports": {
  "default": "./dist/index.js"
}

则可使用：

xml 复制代码

<script src="https://unpkg.com/my-package"></script>

子路径：

json 复制代码

"exports": {
  "./exp": {
    "default": "./dist/exp.js"
  }
}

xml 复制代码

<script src="https://unpkg.com/my-package/exp"></script>

条件导出：

ini 复制代码

https://unpkg.com/react?conditions=react-server

自定义 UNPKG 入口文件

你可以在 package.json 中添加：

json 复制代码

"unpkg": "./dist/index.unpkg.js"

或：

json 复制代码

"exports": {
  "unpkg": "./dist/index.unpkg.js"
}

这样 https://unpkg.com/my-package 会使用你指定的文件。

浏览器访问

使用https://app.unpkg.com/组件库名称,则可以通过浏览器访问信息

arduino 复制代码

https://app.unpkg.com/axios

可以直接访问package.json查看export和import信息

因为并不是所有的库都支持es,只有支持es的模式,才可以通过importMap的方式来引入.

免构建项目示例（使用 Import Map）

perl 复制代码

<script type="importmap">
{
  "imports": {
    "preact": "https://unpkg.com/preact@10.25.4/dist/preact.module.js",
    "preact/hooks": "https://unpkg.com/preact@10.25.4/hooks/dist/hooks.module.js",
    "htm": "https://unpkg.com/htm@3.1.1/dist/htm.module.js"
  }
}
</script>

能够寻找到正确的cdn地址后，就可以配置到Vue SFC Playground的Import Map中，然后可以在组件内使用import的方式来使用

可以亲手试一试

代码完成后,就可以将url分享给好友,但注意url是根据内容实时变更的,不会同步更新

查找路径建议

去 npmjs.com 搜索包名。
查看 package.json 信息
查看 dist/ 或 esm/ 目录下有哪些文件。
拼接完整的路径用于 UNPKG 访问。

当然可以，以下是重新组织后的内容，更清晰简洁：

更简单的方式： ESM Run

如果你的网络状况良好，ESM Run 是一个非常便捷的工具，它是一个用于调试 CDN 模块导入的 playground，支持测试以下方式的模块：

npm: 协议
esm.sh、skypack.dev 等 CDN 模块源

你可以快速验证模块是否能通过 CDN 正确导入，适合调试 ES 模块和构建 import map 配置。

扩展

像这样的演练场有:

当然可以，以下是按你给的格式重新组织的常用前端在线演练场（REPL）工具：

像这样的演练场有：

Babel REPL

转换、调试 JavaScript 最新语法，查看编译结果（支持 React、TS 等插件）
TypeScript Playground

官方 TypeScript 调试工具，支持类型推导、错误提示、转译预览
React Native Snack

在线运行 React Native 示例，支持模拟器预览（需登录）
StackBlitz

类似 VSCode 的在线 IDE，支持完整 Node/npm、支持 Vue/React/Vite/Angular，全功能项目开发和 import map
CodeSandbox

强大的前端项目协作平台，支持 npm 安装、importmap、适合组件库演示、Vue/React 开发
JSFiddle

传统的 HTML/CSS/JS 编辑器，适合快速原型，不推荐现代模块化开发
CodePen

前端 UI 演示平台，支持动画、样式调试，适合 CSS/HTML 视觉展示项目
Svelte REPL

Svelte 官方在线编辑器，支持组件预览、动态参数，适合学习 Svelte

参考文档

unpkg.com/ developer.mozilla.org/zh-CN/docs/...

使用CDN、ImportMap增强Vue playground

UNPKG

基本用法

基本 URL 格式

示例：

使用 latest 或 semver 范围

浏览目录和元信息

获取目录元信息：

文件路径解析规则

示例：

默认导出：

exports.default 解析：

子路径：

条件导出：

自定义 UNPKG 入口文件

浏览器访问

免构建项目示例（使用 Import Map）

查找路径建议

更简单的方式： ESM Run

扩展

参考文档

使用 `latest` 或 semver 范围

`exports.default` 解析：