[JavaScript知识库]设置 NPM Registry 的 4 种姿势

前言

前段时间，由于团队使用的 Monorepo 工程使用的工具是 Lerna，所以在思考如何改造的问题，最终整体的技术选型是 PNPM + Changeset + Turborepo。相应地，就需要在这个选型的背景下支持原先使用到的 Lerna 的能力。

其中，比较有意思的就是需要把 Package 发布到私有 Registry。因为，这里选择了 Changeset，所以最后执行发布的命令会是：

pnpm changeset publish

那这个时候，就牵扯到一个问题，项目中的私有 Registry 要配置在哪？这里我们不着急找答案，先来了解一下配置私有 Registry 的 4 种姿势。

1 Global registry

我们可以通过设置 npm 或者 pnpm 的 config 来设置 Global Registry，例如：

# npm
npm config set registry=http://localhost:2000

# or pnpm
pnpm config set registry=http://localhost:2000

这样一来，在代码层面就可以通过 process.env.npm_config_registry 读取到这里的配置。

2 .npmrc

无论是 npm 或 pnpm 默认都会从项目的 .npmrc 文件中读取配置，所以当我们需要 包的发布要走私有 Registry 的时候，可以这样设置：

registry = http://localhost:2000

3 --registry

在执行 npm publish 或 pnpm publish 的时候，我们也可以通过带上 --registry Option 来告知对应的包管理工具要将包发布的 Registry 是什么，例如：

# npm
npm publish --registry=http://localhost:2000

# or pnpm
pnpm publish --registry=http://localhost:2000

4 PublishConfig

PublishConfig 指的是我们可以在要执行 publish 命令的项目 package.json 中的 publishConfig.registry 来告知 npm 或 pnpm 要发布的 Registry，例如：

{
  ...
  "publishConfig": {
    "registry": "http://localhost:2000"
  }
  ...
}

5 Changeset publish 原理

在了解完 4 种设置私有 Registry 的姿势后，我们回到文章开始的这个问题，如何让 pnpm changeset publish 知道要把发布包到指定的私有 Registry？如果，你觉得以上 4 种任选一种即可，那你可能需要踩些坑。

首先，我们需要知道的是 pnpm changeset publish 命令的本质是执行 changeset 的 publish。那么，也就是上面的 4 种设置 Registry 的方式，很可能不是每种都生效的，因为 Changeset 有一套自己的 publish 机制。而这个过程它主要会做这 3 件事：

1.首先，获取 Package Info，它会从指定的 Registry 获取 Package Info。举个例子，如果是获取 rollup 的 Package Info，那么在这里会是这样：

npm info rollup --registry="https://registry.npmjs.org/" --json

2.其次，根据上面拿到的 Package Info 中的 versions 字段（它是一个包含所有已发布的版本的数组），对比本地的 package.json 的 version 字段，判断当前版本是否已发布

3.最后，如果未发布当前版本，则会根据当前使用的包管理工具执行 publish 命令，并且此时会构造一个它认为应该发布的 Registry 地址，然后重写 env 上的配置，对应的代码会是这样：

// packages/cli/src/commands/publish/npm-utils
const envOverride = {
  npm_config_registry: getCorrectRegistry()
};
let { code, stdout, stderr } = await spawn(
  // 动态的包管理工具，例如 pnpm、npm、yarn
  publishTool.name,
  ["publish", opts.cwd, "--json", ...publishFlags],
  {
    env: Object.assign({}, process.env, envOverride)
  }
);

可以看到，整个 changeset publish 的过程还是很简单易于理解的。并且，非常重要的是这个过程牵扯到 Registry 获取的都是由一个名为 getCorrectRegistry() 的函数完成的，它的定义会是这样：

// packages/cli/src/commands/publish/npm-utils.ts
function getCorrectRegistry(packageJson?: PackageJSON): string {
  const registry =
    packageJson?.publishConfig?.registry ?? process.env.npm_config_registry;

  return !registry || registry === "https://registry.yarnpkg.com"
    ? "https://registry.npmjs.org"
    : registry;
}

那这么一看，我想大家都明白了，为什么前面提及 4 种设置 Registry 的方式，很可能不是每种都生效的。

因为，在 Changeset 中只支持了 publishConfig 或 env 配置 Registry 的方式，所以如果你尝试其他 2 种方式就会 publish 到 https://registry.yarnpkg.com 或 https://registry.npmjs.org，并且在第一步获取 Package Info 的时候可能就会失败。

结语

我想文章虽短，但是传达的知识点还是蛮有趣的。至于前面所说的 PNPM + Changeset + Turborepo 技术选型，起码目前我体验起来还是很丝滑的，无论是在依赖安装、多包任务执行、Version Or Publish 等方面都很优秀。所以，有兴趣的同学倒是可以尝试一下。

最后，如果文中存在表达不当或错误的地方，欢迎各位同学提 Issue ～

点赞

通过阅读本篇文章，如果有收获的话，可以点个赞，这将会成为我持续分享的动力，感谢～

我是五柳，喜欢创新、捣鼓源码，专注于源码（Vue 3、Vite）、前端工程化、跨端等技术学习和分享，欢迎关注我的微信公众号 Code center 或 GitHub。