使用 Lerna + Verdaccio 实现前端私有库

在前端开发中，我们常常需要管理和共享代码库。有时候，我们希望将一些重用的代码或组件保留为私有库，并在需要的时候将其引入到项目中。本文将介绍如何使用 Lerna 和 Verdaccio 搭建一个前端私有库的环境

什么是 Lerna 和 Verdaccio？

• Lerna 是一个用于管理多个 JavaScript 项目的工具。它在一个代码仓库中管理多个包，并优化了跨包之间的依赖关系和发布流程

• Verdaccio 是一个基于 npm 的私有库管理器。它允许你在本地或私有服务器上快速搭建一个 npm 注册表，并将代码和软件包发布到私有库

• PM2 是一款非常强大的 Node.js 进程管理工具，能够使应用在后台永久运行应用，无需担心应用崩溃会导致服务停止

步骤

下面是使用 Lerna 和 Verdaccio 实现前端私有库的详细步骤：

步骤 1：安装 Lerna 和 Verdaccio 以及 PM2

npm install -g lerna
npm install -g verdaccio
npm i pm2 -g

步骤 2：初始化 Lerna 项目

npm init
git init
lerna init

lerna init，执行完该命令后，会在当前目录下创建一个 lerna.json 和 名为packages的文件夹

lerna.json文件内部长这个样子，默认是固定模式，即所有 package 下的包，version 与 lerna.json的 version 保持同步。独立模式中version 会设置为independent，所有子package独立维护各自的版本。

{  
  "packages": [  
    "packages/*"  
  ],  
  "version": "0.0.0"  // 独立模式需要改成 independent
}

步骤 3：配置 Verdaccio

1. 打开终端，使用 pm2 开启 verdaccio pm2 start verdaccio
2. 打开浏览器，并在地址栏中输入localhost:4873以访问 Verdaccio 的 Web 界面。

步骤 4：配置 Lerna 包和发布

1. 在packages 文件夹下创建私有包。每个包都应该是一个独立的文件夹。
2. 在每个包的根目录下创建一个 package.json 文件，并配置它们的依赖和其他相关信息。
3. 编辑根目录下的 lerna.json 文件，将 npmClient 的值设置为 verdaccio（即 npmClient: "verdaccio"）。
4. 为每个包设置 publishConfig，以指定发布到 Verdaccio 的注册表。例如：

{
  "name": "my-private-component",
  "version": "1.0.0",
  "publishConfig": {
    "registry": "http://localhost:4873"
  },
  // 其他配置项...
}

步骤 5：发布和安装私有包

1. 在终端中执行 lerna publish 命令，它将为每个包依次执行发布操作，并将它们发布到 Verdaccio 的注册表。

2. 执行 npm install @<scope>/<package-name> 命令来安装私有包。

例如，如果你的包的名称是 my-private-component，并且在 @my-scope 范围内发布，你可以执行以下命令安装它：npm install @my-scope/my-private-component。

如果并没有发布到 npm，只是发布到了公司的 verdaccio 上，则这样安装 npm install @my-scope/my-private-component --registry=你们公司的 verdaccio 域名，或者在 .npmrc中，添加 @my-scope:registry=你们公司的 verdaccio 域名。

注意，确保在项目的 package.json 文件中添加了对该包的依赖。

结论

通过使用 Lerna 和 Verdaccio，我们可以轻松搭建一个前端私有库环境。使用 Lerna 管理多个包，并通过 Verdaccio 进行私有库的发布和安装，可以更好地组织和共享前端代码和组件，并确保代码的安全性和可控性。

这篇好文章是转载于：学新通技术网