如何在 unpkg 快速获取指定版本的 CDN 链接

unpkg 是一个流行的前端 CDN 服务，允许开发者直接引用 npm 包中的文件。如果你需要在项目中加载特定版本的 JavaScript 库，unpkg 提供了简单直观的 URL 格式。本文将介绍如何正确构造 unpkg CDN 链接，以确保获取指定版本的资源。

---

unpkg CDN 链接格式

unpkg 的 URL 遵循以下结构：

https://unpkg.com/<package-name>@<version>/<文件路径>

参数说明

1. <package-name>
   替换为 npm 包名，例如 react、vue、lodash 等。
2. @<version>
   指定版本号（如 @18.2.0），如果省略，unpkg 会默认加载最新版本。
3. /<文件路径>
   可选参数，用于指定包内的具体文件（如 /dist/react.min.js）。如果省略，unpkg 会加载 package.json 中定义的 main 入口文件。

---

示例

1. 加载 React 18.2.0 的生产环境版本

https://unpkg.com/react@18.2.0/umd/react.production.min.js

2. 加载 Lodash 4.17.21 的完整包

https://unpkg.com/lodash@4.17.21

3. 加载 Vue 3.3.0 的默认入口文件

https://unpkg.com/vue@3.3.0

---

注意事项

• 推荐固定版本：避免使用无版本号的 URL（如 https://unpkg.com/react），以防止因自动更新导致项目不稳定。
• 检查文件路径：部分 npm 包需要明确指定 /dist/ 或 /build/ 目录下的文件。
• 长期缓存：unpkg 会对文件进行长期缓存，适合生产环境使用。

如果需要查看某个包的所有可用版本，可以访问：

https://unpkg.com/<package-name>@<version>/package.json

或在 npm 官方页面查询版本列表。

---

总结

unpkg 提供了一种便捷的方式加载 npm 包资源，通过 @<version> 可以精确控制依赖版本，确保项目稳定性。建议在开发和生产环境中始终使用固定版本，以避免潜在的兼容性问题。