Architecture-Single Code Base-monorepo-lerna(8.0.0): lerna-pnpm-vue3-vite-ts Practice / For managing JavaScript projects containing multiple packages (packages)

1. About Lerna

Splitting large code repositories into multiple independently versioned packages is very useful for code sharing. However, if some changes span multiple code repositories, it will become cumbersome and difficult to track, and tests that span multiple code repositories will It quickly becomes very complex.

To solve these (and many other) problems, some projects split the code repository into multiple packages and store each package in a separate code repository. However, projects such as Babel, React, Angular, Ember, Meteor, Jest, and many others contain and develop multiple packages in one code repository.

Lerna is a tool optimized for the workflow of managing multi-package repositories using git and npm.

2. Install Lerna and get started

Lerna · Getting Started and Installing

2.1. Installation

pnpm add --global lerna

Version: 8.0.0

2.2. Getting Started

We will create a new git code repository

git init lerna-repo && cd lerna-repo

We converted the above warehouse into a Lerna warehouse

lerna init

The code warehouse should currently have the following structure

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/*"

4. Dependency improvement/use root directory node_modules

This article’s technology stack pnpm + lerna8.0.0 + vue3 + vite + ts

4.1. Create Lerna warehouse

Create an empty folder to serve as the Lerna repository, and then run the following command in the folder:

npx lerna init

This will create a Lerna repository, manually create the packages directory in the root directory to store all sub-projects.

4.2. Create subprojects

4.2.1. Create the app-base directory under the packages directory as a sub-project directory

packages/app-base

4.2.2. Create vue-ts subproject in the app-base directory

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

After creating the project, install the project dependencies in the sub-project pnpm install

4.3. Subproject test dependency improvement

Install element-plus and lodash in the root directory and test in sub-projects to see if they are successful.

pnpm add lodash

pnpm add @types/lodash

pnpm add element-plus

main.ts configuration 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 is tested using lodash and 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>

Both lodash and element-plus can be used normally, indicating that node_modules dependency has been successfully upgraded.

5. Component improvement

How to use pnpm-workplace

Architecture-single code base-monorepo-pnpm-workspace: basic usage / One code warehouse contains multiple software packages (packages) and is developed-CSDN Blog

6. More lerna configurations for sub-projects

Create a sub-project under the Lerna warehouse. Execute the following command in the packages directory:

npx lerna create app-base

Directory before execution

Directory after execution

package.json before execution

{
  "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"
  }
}

After execution package.json

At this time, some lerna configuration items have been added, and detailed usage will be added later.

{
  "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/"
  }
}

5. Root directory package.json configuration

To be added

6. Process records

Record 1: Does lerna8.0.0 need to set up soft links?

AI answer

In Lerna 8.0.0, there is no need to set up soft links. Lerna 8.0.0 uses a new default behavior, which is to manage all packages in the project through Yarn's workspace function. This function has built-in link package function, so there is no need to manually set soft links.

Prior to Lerna 8.0.0, using soft links was a common way to manage packages in a project. Soft links allow you to link a package directory to a globally installed package directory so that you can use globally installed packages in your project. However, in Lerna 8.0.0, this practice has been replaced by Yarn's workspace feature.

If you used soft links to manage packages in the Lerna project before, after upgrading to Lerna 8.0.0, you can remove the soft link settings and use Yarn's workspace function to manage your packages.

Same as pnpm

Record 2. The difference between Lerna and pnpm workspaces

AI answer

Lerna and PNPM Workspaces are both tools for managing multiple related projects, but there are some differences between them.

Lerna is a JavaScript tool that allows you to manage multiple related npm packages in a single repository. Lerna provides a simplified version of the monorepo workflow that allows you to share code and dependencies between multiple packages. Lerna uses Git and npm to manage packages and allows you to install and start projects via npm or Yarn.

PNPM Workspaces is an npm client that allows you to manage multiple npm packages in a single repository, but unlike Lerna, it does not require all your code to be in a single repository. PNPM Workspaces uses a single node_modules folder to manage the dependencies of all packages and uses soft links to ensure that all packages can share the same dependencies. Compared to Lerna, PNPM Workspaces is more lightweight and easier to use, but requires more manual configuration to make it work properly.

Overall, Lerna is suitable for projects that need to manage multiple related packages in one large repository, while PNPM Workspaces is suitable for projects that require a more flexible repository structure. No matter which tool you choose, they can help you manage multiple related packages more easily.