架构-单一代码库-monorepo-lerna(8.0.0)：lerna-pnpm-vue3-vite-ts 实践 / 用于管理包含多个软件包（package）的 JavaScript 项目

一、关于Lerna

将大型代码仓库分割成多个独立版本化的软件包（package）对于代码共享来说非常有用。但是，如果某些更改跨越了多个代码仓库的话将变得很麻烦并且难以跟踪，并且，跨越多个代码仓库的测试将迅速变得非常复杂。

为了解决这些（以及许多其它）问题，某些项目会将代码仓库分割成多个软件包（package），并将每个软件包存放到独立的代码仓库中。但是，例如 Babel、 React、Angular、Ember、Meteor、Jest 等项目以及许多其他项目则是在一个代码仓库中包含了多个软件包（package）并进行开发。

Lerna 是一种工具，针对使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化。

二、安装Lerna及入门

Lerna · 入门及安装

2.1、安装

pnpm add --global lerna

版本：8.0.0

2.2、入门

我们将创建一个新的 git 代码仓库

git init lerna-repo && cd lerna-repo

我们将上述仓库转变为一个 Lerna 仓库

lerna init

代码仓库目前应该是如下结构

lerna-repo/
  packages/
  package.json
  lerna.json

三、single pattern && multiple patterns

Getting Started | Lerna

3.1、Passing a single pattern

npx lerna init --packages="packages/*"

3.2、Passing multiple patterns

npx lerna init --packages="project1/*" --packages="project2/*"

四、依赖提升 / 使用根目录 node_modules

本文技术栈 pnpm + lerna8.0.0 + vue3 + vite + ts

4.1、创建Lerna仓库

创建一个空的文件夹来作为Lerna仓库，然后在该文件夹下运行以下命令：

npx lerna init

这将会创建一个Lerna仓库，手动在根目录创建packages目录用于存放所有子项目。

4.2、创建子项目

4.2.1、packages目录下创建app-base目录作为子项目目录

packages/app-base

4.2.2、在app-base目录创建vue-ts子项目

pnpm create vite app-base --template vue-ts

创建项目后，在子项目pnpm install安装项目依赖

4.3、子项目测试依赖提升

根目录安装element-plus、lodash在子项目测试，查看是否成功

pnpm add lodash

pnpm add @types/lodash

pnpm add element-plus

main.ts 配置 element-plus

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4.4、app.vue使用lodash、element-plus测试

<script setup lang="ts">
import { isEmpty } from 'lodash'
console.log('isEmpty', isEmpty(''))
</script>

<template>
  <div>
    <el-button>haha</el-button>
  </div>
</template>

<style scoped>
</style>

lodash和element-plus均可正常使用，说明node_modules依赖提升成功

五、组件提升

使用pnpm-workplace的方法

架构-单一代码库-monorepo-pnpm-workspace：基本使用 / 一个代码仓库中包含了多个软件包（package）并进行开发-CSDN博客

六、子项目更多lerna配置

在Lerna仓库下创建子项目。在packages目录下执行以下命令：

npx lerna create app-base

执行前目录

执行后目录

执行前 package.json

{
  "name": "app-base",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
}

执行后 package.json

此时已经增加了一些lerna的配置项，详细用法后续补充。

{
  "name": "bar",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bar": "^0.1.2",
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  },
  "description": "> TODO: description",
  "author": "[email protected] <[email protected]>",
  "homepage": "",
  "license": "ISC",
  "main": "lib/bar.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib",
    "package.json",
    "README.md"
  ],
  "publishConfig": {
    "registry": "https://registry.npmmirror.com/"
  }
}

五、根目录package.json配置

待补充

六、过程记录

记录一、lerna8.0.0需要设置软链接吗

AI回答

在Lerna 8.0.0中，不需要设置软链接。Lerna 8.0.0使用了新的默认行为，即通过Yarn的workspace功能来管理项目中的所有包。这个功能已经内置了链接包的功能，因此不需要手动设置软链接。

在Lerna 8.0.0之前，使用软链接是一种常见的方法来管理项目中的包。软链接允许你将包目录链接到全局安装的包目录，这样你就可以在项目中使用全局安装的包。然而，在Lerna 8.0.0中，这种做法已经被Yarn的工作空间功能所取代。

如果你之前使用软链接管理Lerna项目中的包，升级到Lerna 8.0.0后，你可以移除软链接的设置，并使用Yarn的工作空间功能来管理你的包。

pnpm同理

记录二、Lerna 和 pnpm workspaces区别

AI回答

Lerna和PNPM Workspaces都是用于管理多个相关项目的工具，但它们之间有一些区别。

Lerna是一个JavaScript工具，它允许您在单一存储库中管理多个相关的npm软件包。Lerna提供了一种简化版本的monorepo工作流程，允许您在多个软件包之间共享代码和依赖项。Lerna使用Git和npm来管理包，并允许您通过npm或Yarn进行安装和启动项目。

PNPM Workspaces是一个npm客户端，它允许您在单个存储库中管理多个npm软件包，但它与Lerna不同，它不需要将所有代码放在单个存储库中。PNPM Workspaces使用单个node_modules文件夹来管理所有软件包的依赖项，并使用软链接来确保所有软件包都可以共享相同的依赖项。相比于Lerna，PNPM Workspaces更加轻量级，更容易使用，但需要更多的手动配置来使其正常工作。

总的来说，Lerna适用于需要在一个大型存储库中管理多个相关软件包的项目，而PNPM Workspaces适用于需要更灵活的存储库结构的项目。无论您选择哪种工具，它们都可以帮助您更轻松地管理多个相关软件包。