NPM 仓库的超集 JSR 来了！

引言

今天在 Deno 博客中看到了一篇文章，介绍了一个叫 JSR 的包管理注册中心，简单尝试了一下觉得还不错，本文将结合原文章和个人体验对 JSR 进行一个详细的介绍。

在现如今的前端开发中，包管理注册中心 (如 npmjs.com) 扮演着至关重要的角色。它们不单是代码共享的媒介，更是实现模块化开发的枢纽。对于长久以来习惯于使用 npm 以及它的生态系统的前端开发者来说，我们见证了它如何帮助我们管理依赖、共享解决方案，以及如何推动 Node.js 生态的蓬勃发展。然而，随着开发实践的演进以及新技术的出现，我们会发现现有注册中心的一些痛点和局限性。

npm，在它巨大的包库和广泛的使用中，开始面临性能、安全性以及包的质量保证等方面的挑战。由于基于一个过时的 CommonJS 包格式，在处理现代化的、基于ES模块的项目时，npm 无法提供原生支持。而且，随着 TypeScript 愈发受到开发者的欢迎，相比于 JavaScript，npm 处理 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 环境的需要。
• 跨平台兼容：除了 Deno，JSR的设计考虑了与多个运行时环境的兼容性，包括但不限于 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:registry=https://npm.jsr.io

安装命令如下：

npm install @jsr/luca__cases@1 # 从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 lodash

2. 发布自己的包

1. 想要发布自己包，首先需要在 jsr 仓库中创建自己的账号
2. 然后在你的项目中创建一个 jsr.json 配置文件（支持 jsr.jsonc, deno.json 等别名文件）
3. 然后在 jsr.json 中添加如下配置：

{
  // 这里只是列出了必须的配置
  // 更详细的配置说明请参阅官网: https://jsr.io/docs/package-configuration
  "name": "@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 -y

2. 修改模块类型

修改 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 jsrBinarySearch

4. 添加 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_beta
• JSR 官网：https://jsr.io/
• JSR 简介：https://jsr.io/docs/introduction
• 为什么使用 JSR: https://jsr.io/docs/why
• JSR 的 npm 兼容层：https://jsr.io/docs/npm-compatibility