工具用的顺手吗？
你的反馈能帮助我们做得更好
快速查找常用JS库的CDN链接，一键复制引入代码，提升前端开发效率。
按内置固定版本和路径生成 jsDelivr、unpkg 或 esm.sh 的网址与标签；不查询最新版，也未验证每个资源当前可访问。使用前检查路径、版本、授权及浏览器加载结果。 参考来源
https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js<script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js"></script>import * as React from "https://esm.sh/react@18.3.1";概览
了解工具能解决的问题、计算或处理逻辑，以及数据边界。
CDN（内容分发网络）把静态资源放在多个网络节点上，网页可通过资源地址加载 JavaScript 或 CSS 文件。对开发者来说，CDN 片段可以省去把某个库文件随项目打包的步骤；页面速度仍取决于网络、资源大小、浏览器缓存和服务状态，不能仅凭 CDN 字样判断一定更快。
页面列出一组预置前端类库，可按关键词、分类或库名筛选，并展示所选条目的包名、版本、类别及可用的全局变量信息。切换资源提供方后，会生成相应的 JavaScript 脚本片段。若选择 jsDelivr 或 unpkg，且条目包含 CSS 文件，页面还会显示样式表片段；选择 esm.sh 时，页面省略单独 CSS 片段。模块环境另有 import 语句，它独立于脚本标签的服务方设置。示例结构为 <script src="资源地址"></script>、<link rel="stylesheet" href="样式地址"> 或 import * as 名称 from "模块地址";。复制后仍需放入项目合适的位置，并确认项目采用的加载方式。
指南
按步骤完成操作，并通过示例核对输入与结果。
输入库名、包名、版本文字或标签关键词，也可先选框架、UI、图表、工具函数、网络、动画、编辑器或媒体分类。列表会按当前条件缩小范围。
打开目标条目，确认显示的包名、版本、分类和全局变量名称与项目预期一致。包名和版本会进入生成的资源地址。
按项目环境切换资源提供方，复制脚本、CSS 或模块 import 片段。传统 HTML 页面通常使用脚本标签；模块项目需把 import 放在模块上下文中。
把片段放在页面或构建流程允许的位置，再打开项目检查网络请求、控制台错误和库的实际导出名称。依赖库有加载顺序要求时，先加载依赖，再加载使用它的脚本。
场景
查看这项工具在不同工作与生活流程中的用法。
在单页 HTML 原型里尝试表格、图表或交互效果时，先从列表找到需要的库，复制脚本和必要的样式片段，再在本地页面验证依赖是否正确加载。
接手不熟悉的旧页面时，可先查出它引用的库与版本，再对照项目约定生成对应片段。正式改动前应确认原项目的模块类型、加载顺序和许可要求。
问答
集中解答高频疑问与容易混淆的问题。
此页使用预置条目列表，不是对 npm 全量仓库的实时搜索；如果某个包不在列表中，筛选结果不会自动补出该包，也不能在此页添加新条目。
当项目以 JavaScript 模块方式运行时可使用 import 片段；在普通 HTML 页面中，应选择脚本标签形式，或先按项目文档配置模块脚本上下文。
不一定。页面按条目中列出的固定版本生成片段，不查询包的实时发布信息；上线前请核对项目锁定版本和该库维护者的发布记录。
不会。只有条目定义了样式文件时才会生成样式表片段；纯 JavaScript 类库可能没有单独 CSS 文件。
须知
使用前了解适用范围、结果限制与必要提醒。
复制出的片段会让浏览器从所选的外部资源服务请求脚本或样式；网络不可达、地址变更或服务异常都会影响页面。外部脚本也属于供应链依赖，接入前核对来源、包名、版本和文件路径，并按项目安全策略评估 Subresource Integrity（SRI）或自托管方案。该页面不检查代码许可、漏洞状态、浏览器兼容性，也不替代项目的依赖审查。
推荐
查找相关工具、专题与可用的 API 能力。