lerna+verdaccio+cli工具实现前端monorepo工程化（一）

三营六组白面葫芦娃

已于 2024-04-16 16:31:30 修改

阅读量636

点赞数 16

分类专栏：前端 #JavaScript 前端工程化文章标签：前端

于 2024-04-16 16:01:48 首次发布

本文链接：https://blog.csdn.net/aa96cpv/article/details/137816651

版权

前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

#JavaScript

2 篇文章 0 订阅

订阅专栏

前端工程化

1 篇文章 0 订阅

订阅专栏

对于前端项目来说，有自己的轮子，一套成熟的工程化流程是必要的，正好最近公司在做，趁热记录下来。

简介

lerna背景

维护过多个package的同学可能遇到过这个问题：当package的数量较少的时候维护比较容易，不会有太大问题，随着包逐渐增多的时候则会出现以下问题：

· 包之间互相依赖，版本号问题需要手动更新。
· 每个包都是单独的一个node_modules,安装耗时。

lerna则是为了解决多包依赖管理的一种解决方案，解决了上述问题。

而在我的探索过程中则出现了以下问题：工程的包不可能放到npm公共源中，此时公司也暂时没有自己的npm服务器，需要一个私人服务器来管理这些包，选型之后选择了verdaccio来暂时管理自己的多个npm包。

verdaccio

Verdaccio，是一个轻量级的 npm 私有仓库的开源解决方案，有如下特点：
· 基于 Node.js 的网页应用程序
· 私有 npm registry
· 本地网络 proxy
· 可插入式应用程序
· 易安装和使用（免费、零配置，开箱即用）
· 提供 docker 和 kubernetes 支持
· 与 yarn，npm 100%兼容
基于以上优点，verdaccio是一个很适合存储个人npm包的解决方案。

发包快速上手

使用之前，需要全局安装所需要的依赖项，安装的命令如下：

npm i -g verdaccio
npm i -g lerna@4.0.0	// 需要注意的是lerna需要npm版本至少升级7以上才有相关依赖

之后打开项目执行init：

lerna init

该命令会帮我们在根目录创建 lerna.json 配置文件以及创建一个用于存放软件包的 package 文件夹，并且自动执行 git init 的操作，帮助我们初始化 git 项目。

在lerna.json中可以根据项目需要配置不同的设置。

安装完之后我们开启自己的私人verdaccio服务器:

首先要打开当前npm的node_modules文件夹版本修改verdaccio的一些配置，lerna的默认配置文件夹是default.yaml，你要打开你当前npm源找到node_modules中的相关文件比如我的是：
C:\Users\EDY\AppData\Roaming\nvm\v15.14.0\node_modules\verdaccio\conf\default.yaml

打开之后首先要修改一下最大包体积，避免打包失败，默认是500mb，我改成了1000mb

max_body_size: 1000mb

之后在下面添加如下代码

listen:
# - localhost:4873            # default value
# - http://localhost:4873     # same thing
- 0.0.0.0:4873 #这样其他电脑才能访问你本地的verdaccio仓库

可以用pm2管理verdaccio进程，从而设置或更改 npm 的源，此处我未进行使用，有相关需求的同学可以查阅一下相关资料。

之后在我们的powershell中直接输入 verdaccio 开启服务器即可：
在这里插入图片描述
而在浏览器中访问http://localhost:4873/ 即可看到自己的服务器以及上面的包

基础准备做完之后，我们可以开始自己的打包工作了：

npm set registry http://localhost:4873/						// 切换自己的npm源到verdaccio
npm adduser --registry http://localhost:4873/				// 添加用户

lerna的发包过程也很简单，只需要在你需要发包的文件夹下添加相关的package.json文件并在其中修改你的相应配置：

{
  "name": " ",				// 包名称（注意此处支持长路径如  root/part1）
  "version": "0.0.6",		// 版本
  "description": "开发init",
  "author": "",
  "homepage": "",
  "license": "ISC",
  "main": "index.jsx",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "**/*"
  ],
  "scripts": {
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "publishConfig": {
    "access": "public"
  },
}

将修改提交之后发包：