重庆在线网站推广,目前最新的网站后台架构技术综述,深圳网站系统哪家强,龙岩网红隧道在哪引言
今天在 Deno 博客中看到了一篇文章#xff0c;介绍了一个叫 JSR 的包管理注册中心#xff0c;简单尝试了一下觉得还不错#xff0c;本文将结合原文章和个人体验对 JSR 进行一个详细的介绍。
在现如今的前端开发中#xff0c;包管理注册中心 (如 npmjs.com) 扮演着至…引言
今天在 Deno 博客中看到了一篇文章介绍了一个叫 JSR 的包管理注册中心简单尝试了一下觉得还不错本文将结合原文章和个人体验对 JSR 进行一个详细的介绍。
在现如今的前端开发中包管理注册中心 (如 npmjs.com) 扮演着至关重要的角色。它们不单是代码共享的媒介更是实现模块化开发的枢纽。对于长久以来习惯于使用 npm 以及它的生态系统的前端开发者来说我们见证了它如何帮助我们管理依赖、共享解决方案以及如何推动 Node.js 生态的蓬勃发展。然而随着开发实践的演进以及新技术的出现我们会发现现有注册中心的一些痛点和局限性。
npm在它巨大的包库和广泛的使用中开始面临性能、安全性以及包的质量保证等方面的挑战。由于基于一个过时的 CommonJS 包格式在处理现代化的、基于ES模块的项目时npm 无法提供原生支持。而且随着 TypeScript 愈发受到开发者的欢迎相比于 JavaScriptnpm 处理 TypeScript 包时常常需要额外的转换和配置步骤这无疑增加了开发者的负担。
这就是 JSR 出现的原因它为 JavaScript 和 TypeScript 开发者提供了更为现代化的包管理解决方案它不仅针对现存的痛点提供了明确的解答还将注意力转向了未来。通过原生支持 TypeScript 和 ES 模块JSR 展示了它如何过渡到一个充分利用现代 JavaScript 特性的生态系统。
JSR 的设计需要在这些现有解决方案的基础上再进一步。它不仅提供了对新技术的支持还专注于提升开发者体验并以安全性和性能为重点。
1. JSR的基础
在我们深入探讨 JSR 如何运作以及如何用它来优化开发环境之前让我们先建立对它的基本理解。以下是关于JSR核心概念、它如何工作以及它为何重要的解释。
1. JSR简介
JSR是一个全新的包管理注册中心它旨在为现代 JavaScript 和 TypeScript 的生态系统提供支持。与其他包管理器相比JSR 把握了现代开发的趋势提供了独特的优势
原生 TypeScript 支持JSR 能处理未编译的 TypeScript 代码这让类型安全和开发体验得到了质的提升。ES 模块化通过只支持 ES 模块JSR 促使开发者采用最新的 JavaScript 模块标准以适应实际 web 环境的需要。跨平台兼容除了 DenoJSR的设计考虑了与多个运行时环境的兼容性包括但不限于 Node.js 和浏览器。
2. JSR 和 npm 之间的差异
JSR 并不是 npm 注册表的替代品而是 npm 的超集。JSR 模块可与任何 JavaScript 包管理器配合使用也可在任何带有 node_modules 文件夹的项目中使用。
虽说 npm 已经是 JavaScript 包管理的事实标准但 JSR 采用了新的方法论以解决 npm 未能充分覆盖的需求
自动生成文档、包评分原生 TypeScript 支持、无需构建步骤安全、无令牌的发布可抵御供应链攻击等等更多能力详情阅读官方文档文末给出
3. 支持的运行时环境
JSR 为开发者提供了前所未有的灵活性允许他们使用相同的包管理策略在不同的 JavaScript 运行时进行开发
Node.js即便 Node.js 有着自己的历史和生态JSR 也为其用户提供了无缝的集成。Deno作为一个较新的 JavaScript 和 TypeScript 运行时Deno 与 JSR 共享许多理念例如模块的URL导入。Web浏览器JSR 确保包能够直接在现代Web浏览器中使用这样开发者可以轻松的进行前端开发。
4. 为什么仅支持ES模块是一个优势
ES模块是 JavaScript 的官方标准模块系统由于其静态结构它们更容易进行静态分析并提供了更可靠的代码优化机会。JSR全面支持ES模块意味着
更好的懒加载模块化使得代码分割和懒加载成为可能从而优化页面加载时间。更清晰的依赖关系与CommonJS相比ES模块的静态导入语法可以在代码运行前确认依赖这使得依赖分析和树震动Tree Shaking更加高效。
2. JSR的安装和配置
为了充分利用 JSR 带来的改进和优势我们需要了解如何在开发环境中配置JSR。
1. 理解JSR的npm兼容层
原生 JSR 只支持在 Deno 中运行为了使各个包管理器都能够使用JSR 专门提供了npm 兼容层使得在现有的 Node.js、Cloudflare Workers、Vite、Esbuild、Webpack 和 Rollup 等工具中可以无缝地使用 JSR 包。这种兼容层的引入让原有依赖于 npm 和 node_modules 机制的工具能够继续运行同时也能受益于 JSR 所提供的改进。
例如Deno用户可以通过jsr:导入前缀来直接使用JSR包无需任何配置变化。
2. 安装和使用JSR包
使用 JSR 的 npm 兼容层你可以利用现存的 npm、yarn 或 pnpm 包管理器来安装JSR包。所需要做的只是简单地调用安装命令例如
npx jsr add luca/cases这条命令将会将luca/cases包添加到你的package.json文件中并通过你首选的包管理器安装到node_modules目录。
3. 添加 JSR 配置
当你使用 JSR CLI 添加包时相关的.npmrc配置文件将会自动生成由此确保后续的npm install、yarn、pnpm install命令执行成功。注意这个.npmrc文件是需要加入版本控制系统的。
比如要在项目中使用JSR包只需要进行简单的导入
import { camelCase } from luca/cases;需要注意的是由于 npm 和 yarn 的一些限制有时可能会出现 JSR 依赖项的重复安装导致node_modules目录不必要的增大对于某些包可能还会引起意外的行为因此建议使用 pnpm 以获得最佳体验。
4. 高级配置和限制
如果不使用 JSR CLI 安装包你还可以手动配置你的包管理器来支持JSR包的安装。这需要在.npmrc文件中添加特定的配置指示包管理器从 JSR 后端载入在jsr范围下的所有包。
.npmrc 配置如下
jsr:registryhttps://npm.jsr.io安装命令如下
npm install jsr/luca__cases1 # 从JSR安装luca/cases包需要注意的是JSR npm 兼容层并不能完全替代原生的JSR支持存在一些限制
不能使用jsr:前缀来导入JSR包。与原生 JSR 导入不同你实际上并不是直接导入 TypeScript 代码。JSR会在安装到你的node_modules目录之前将 TypeScript 代码转译为 JavaScript 代码。这意味着你的编辑器体验可能会受到影响因为跳转到定义等功能可能会链接到转译后的 JavaScript 代码或生成的.d.ts文件。与原生 JSR 支持相比安装时间通常会更长因为即使一些文件并未在项目中使用npm 也会下载这些文件。不能使用npm publish来发布JSR包你只能使用jsr publish或 deno publish 来发布。
3. 通过JSR发布和获取包
1. 管理项目依赖
安装依赖使用 JSR 命令行工具可以添加新的项目依赖。通过执行如下命令JSR不仅会将所需包添加到你的package.json文件中还会在项目中正确地安装它们。
# 除了 add 以外还支持 install、 i 别名
npx jsr add lodash移除依赖如果某个包不再需要使用 JSR 移除它同样简单
# 除了 remove 以外还支持 unistall、r 别名
npx jsr remove lodash2. 发布自己的包
想要发布自己包首先需要在 jsr 仓库中创建自己的账号然后在你的项目中创建一个 jsr.json 配置文件支持 jsr.jsonc, deno.json 等别名文件然后在 jsr.json 中添加如下配置
{// 这里只是列出了必须的配置// 更详细的配置说明请参阅官网: https://jsr.io/docs/package-configurationname: scope/package-name,version: 1.0.0,exports: ./index.ts
}当使用 node.js 发布 jsr 包时需要 node.js 在 18.0 版本以上因为 jsr 使用了 fetch 方法发送的请求而只有在 18.0 版本以上时node 才支持了原生的 fetch 方法。
npx jsr publish注意 软件包一旦发布版本后将不能在 JSR 中删除除非是一个空的软件包才能删除。
3. 发布配额限制
JSR 官方为了避免资源滥用所以对每个用户做了 scope、package 的配额限制默认创建三个 scope至于包的数量在官方文档中提到了 package 数量也有限制但我没找到具体配额。
如果你有更多地需求可以在 account - settings 页面请求增加用户配额。 4. 发布流程演示
我们创建一个简单的实例进行 JSR 仓库的发布演示
1. 创建一个项目
创建一个新的项目并使用 npm 初始化
mkdir jsr-bs
cd jsr-bs
npm init -y2. 修改模块类型
修改 package.json 里的 type 属性为 module, 以启用 ES Module。
{name: jsr-bs,version: 1.0.0,main: index.ts,type: module,//...
}3. 创建入口文件
创建一个 index.ts 并实现一个简单的二分查找算法虽然我们这里使用了 TS 开发但不需要手动配置打包工具进行转译 JSR 在安装一来时自动编译 TS 为 JS 包。
function jsrBinarySearch(arr: number[], target: number): number {let start 0;let end arr.length - 1;while (start end) {const mid Math.floor((end start) / 2);if (target arr[mid]) return mid;else if (target arr[mid]) end mid - 1;else start mid 1;}return -1
}export default jsrBinarySearch4. 添加 jsr 配置
在项目根目录下添加一个 jsr.json 配置文件, 并添加如下内容
{name: ziyang/jsr-bs,version: 1.0.0,exports: ./index.ts
}5. 发布 jsr 包
执行 jsr publish 命令进行发布注意发布前需要注册好 jsr 账号。
npx jsr publish执行命令后JSR 会打开浏览器首次发布时会要求创建作用域和包名称 创建完成后会进行身份验证点击 Approve 即可。 批准后新的包就发布成功啦会自动跳转到包的页面 可以在 Account - Profile 下查看自己的作用域和包 6. 使用刚发布的包
在需要引用的项目里添加依赖
npx jsr add ziyang/jsr-bs使用导入的依赖包
import JSRBinarySearch from ziyang/jsr-bs;console.log(JSRBinarySearch([1, 3, 5, 6, 8, 9], 6)); // - 3结语
本文结合了原文章和个人理解对 JSR 进行了详细的介绍但请注意本文并非是原文章的翻译文章仅提炼一部分关键内容更多详情还请参阅原博客文章在下面参考连接中给出。
参考连接
Deno 博客-JSR 简介 :https://deno.com/blog/jsr_open_betaJSR 官网https://jsr.io/JSR 简介https://jsr.io/docs/introduction为什么使用 JSR: https://jsr.io/docs/whyJSR 的 npm 兼容层https://jsr.io/docs/npm-compatibility
