构建您的私有 npm 库：基于 pm2 + Verdaccio 的指南

2023-11-01 16:52:36

作为一名技术专家，我曾无数次目睹了构建和维护私有 npm 库的挑战。它不仅繁琐，而且容易出错。幸运的是，使用 pm2 和 Verdaccio，您可以创建一个健壮、易于管理的私有 npm 库。本文将引导您完成整个过程，帮助您轻松应对这项任务。

1. 介绍

构建私有 npm 库通常需要使用 npm link 命令，这会带来协作和版本控制方面的挑战。为了解决这些问题，本文将介绍使用 pm2 和 Verdaccio 搭建私有 npm 库。

2. pm2 和 Verdaccio 简介

pm2

pm2 是一个进程管理器，可用于管理和监控 Node.js 应用程序。它提供了一系列功能，包括进程集群、日志记录和负载平衡。

Verdaccio

Verdaccio 是一个轻量级的 npm 代理注册表，可用于托管和发布私有 npm 包。它提供了一个用户界面，用于管理包和用户，并支持多种身份验证机制。

3. 设置您的私有 npm 库

3.1. 安装 pm2 和 Verdaccio

npm install pm2 -g
npm install verdaccio -g

3.2. 创建 Verdaccio 配置文件

在您的项目根目录中创建一个名为 .verdaccio.yaml 的文件并添加以下配置：

storage: ./storage
auth:
  htpasswd:
    file: ./htpasswd
    # 添加您的用户名和密码

3.3. 启动 Verdaccio

verdaccio

4. 使用 pm2 管理 Verdaccio

4.1. 创建 pm2 启动脚本

创建一个名为 verdaccio.js 的文件并添加以下内容：

const pm2 = require('pm2');

pm2.connect(function(err) {
  if (err) {
    console.error(err);
    process.exit(1);
  }

  pm2.start('verdaccio', {
    name: 'verdaccio',
    script: 'verdaccio',
    args: ['--config', '.verdaccio.yaml'],
    watch: true,
    interpreter: 'node',
    autorestart: true,
    exec_mode: 'fork',
  }, function(err, proc) {
    if (err) {
      console.error(err);
      process.exit(1);
    }

    console.log('Verdaccio started');
  });
});

4.2. 启动 Verdaccio 进程

pm2 start verdaccio.js

5. 使用您的私有 npm 库

5.1. 添加 Verdaccio 到您的 npm 源

在您的项目中，编辑您的 .npmrc 文件并添加以下行：

registry=http://localhost:4873

5.2. 发布包到您的私有 npm 库

npm publish --registry=http://localhost:4873

5.3. 从您的私有 npm 库安装包

npm install <package-name> --registry=http://localhost:4873

6. 创建组件库示例

假设您要创建一个名为 my-components 的组件库。以下是如何使用 pm2 和 Verdaccio 进行设置：

6.1. 创建组件库项目

mkdir my-components
cd my-components
npm init -y

6.2. 创建组件

在 my-components 目录中，创建一个目录来存储您的组件，例如 components。在 components 目录中，创建一个 JavaScript 文件，例如 button.js，并添加以下内容：

export default {
  name: 'Button',
  props: {
    label: {
      type: String,
      required: true
    }
  },
  render(h) {
    return h('button', {
      domProps: {
        innerHTML: this.label
      }
    })
  }
}

6.3. 发布组件库到您的私有 npm 库

cd my-components
npm publish --registry=http://localhost:4873

6.4. 在另一个项目中使用组件库

在另一个项目中，添加 Verdaccio 到您的 npm 源：

registry=http://localhost:4873

安装组件库：

npm install my-components --registry=http://localhost:4873

然后，您可以在您的项目中使用组件：

import Button from 'my-components/components/Button.js'

export default {
  components: {
    Button
  },
  render(h) {
    return h('Button', {
      props: {
        label: 'Click Me'
      }
    })
  }
}