Location>code7788 >text

vue3 + pnpm build a monorepo project

Popularity：860 ℃/2024-12-09 15:04:20

Monorepo and Multirepo

A single repository (Monorepo) architecture that can be understood as:A strategy or means to manage multiple packages with a single repositoryIn contrast to the Multirepo architecture

The Monorepo directory will have the publicDependencies other than those in eachsub-packageUnderneath the subpackage, there will also be its own specificDependency.

Sibling modules can be connected to each other via the module defined name Cross-referencing to ensure independence between modules

# monorepo directory structure
monorepo-demo
├─ packages
│ ├─ module-a
│ │ ├─ src # Module a's source code.
│ │ ├─ node_modules # node_modules for module a
│ └─ # Dependencies for module a only.
│ └─ module-b
│ ├─ src # Source code for module b │ └─ # Dependencies for module a only │ ├─ module-b
│ └─ # Dependencies for module b only │ └─ # Dependencies for module b only │ └─ .
├─ .eslintrc # Configuration file, valid for the whole project │ ├─ node_module_source │ └─ # Dependencies for module b only
├── node_modules # node_modules common to all subpackages └── # node_modules common to all subpackages
└── # Dependencies common to all subpackages

Multirepo prefers a project-based approach, where projects are segregated using different repositories, with each project using a uniqueto manage dependencies

# multirepo-adirectory structure
multirepo-a
├── src
├── .eslintrc
├── node_modules
└──

# multirepo-bdirectory structure
multirepo-b
├── src
├── .eslintrc
├── node_modules
└──

Monorepo tool

In software development using the Monorepo (Single Repository) architecture, the choice of tools is critical. The right Monorepo tool can help teams manage large code bases more efficiently, improve the collaborative development experience, and optimize the build and deployment process.

Some of the more popular Monorepo tools in the front-end world today until 2024 arePnpm Workspaces、Yarn Workspaces、npm Workspaces、Rush、
Turborepo、Lerna、YalcpeaceNx

Highly recommendedPnpm Workspaces As a dependency management tool for the Monorepo project😍😍😍

So what is the relationship between Monorepo and package management tools (npm, yarn, pnpm)?

The relationship between these package management tools and monorepo is that they provide support for dependency installation and management, allow sharing of dependencies between different subprojects in monorepo with their own workspace support, and provide a way to manage these shared dependencies, which simplifies the dependency management and build process and This simplifies the dependency management and build process and improves development efficiency.

Monorepo Project Setup

contexts

With the traditional Multirepo model, you usually have one repository for one project. For example, if you have three projects, you need to create three remote repositories and install and upgrade dependencies for each project individually.

The single repository Monorepo model, on the other hand, is about managing multiple projects in a single repository, which can be independent or dependent on each other. With Monorepo, multiple projects can share dependencies. For example, multiple projects needlodashThen we only have to install it once.

pnpm i lodash -w

Of course, Monorepo does not have any other programs in addition to the publicDependencies other than those in eachsub-packagesub-packages will also have their privatedependencies

Our current selectionPnpm Workspaces As a dependency management tool for Monorepo projects, build a monorepo project ✨.

Package Management Tools

Install pnpm globally

npm i pnpm -g

Initialization Project

Create a new project directorypnpm-monorepoRun in the root directorypnpm init Create File

Then create a new folder in the root directorypackagesThe following is a list of sub-packages that are used to store sub-packages

newly builtpackages/libc-shared(shared packages), which hold code that is shared between multiple projects or components. Runningpnpm init Create the file.Modify the name of"@libc/shared"The path field of the modified main entry file is"src/"

{
  "name": "@libc/shared",
  "version": "1.0.0",
  "main": "src/",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

newly builtpackages/libc-ui(public component package), that is, UI component library, here we directly clone theiview-ui-plus Code. Runpnpm install installing dependencies.

Modify the name of"@libc/ui"The path field of the modified main entry file is"src/"

And then we're in thepackages Create two vue projects undervue-dom1 respond in singingvue-dom2Running Scriptspnpm create vue@latestThe dependencies are exactly the same for both projects. Since the dependencies of the two projects are identical, we can copy dependencies and devDependencies to the outer layer as public dependencies, and thenpnpm install Just install it once

At this point, the vue project still won't run, and you have to configure the workspace to support multi-package repositories 💥 so that sub-packaged vue projects can access our public dependencies💥💥

Configuring workspace

The root directory creates a newIf you want to manage all directories under packages as packages 💥💥💥💥💥💥💥💥💥, you can use the following

packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'

pnpm-monorepo Final Project Structure

pnpm-monorepo/
├── packages/
│   ├── libc-shared/
│   ├── libc-ui/
│   ├── vue-dome1/
│   └── vue-dome2/
├── 
└──

Subpackage sharing 💥

At this point.Every sub-package under the workspace can now share our public dependencies. Another question is, how do we share between sibling modules?

As we said before, subpackages can be connected to each other via the definedname Cross-referencing, look at two actual scenarios together

  1. How do I share out the subpackage libc-shared?

expense or outlay--workspaceparameter to install shared subpackages, it will go to the workspace to find the dependencies and install them.

pnpm install @libc/shared --workspace -w

The following dependency is automatically added to the"workspace:" Only parses packages contained in the local workspace

"dependencies": {
   "@libc/shared": "workspace:^"
 }

At this point, the vue project can use the public packagelibc-shared method in the

import { isObject } from '@libc/shared'
  1. How can I share the subpackage libc-ui?

Repeat the steps above, and then we go to reference abuttoncomponent and found that it reported an errorFailed to resolve import "./base" from "../libc-ui/src/components/typography/". Does the file exist?

Addextensions To fix it, configure the list of omitted extensions

resolve: {
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}

even thoughbutton The component reference was successful, but I found that there was no styling effect. In thelibc-ui/src/ Just import the style file into the file

import "./styles/";

dependencies

public dependence

Install public dependencies globallylodash. Need to add-w(Start pnpm in the root directory of your workspace)

pnpm install lodash -w

This way, both vue projects, vue-dom1 and vue-dom2, can use thelodash I've got it. I've got it.

localized dependency

If only the vue-dom1 project uses thelodashWe can also install it inside the vue-dom1 project, not as a public dependency, which can be accomplished in two ways

  1. cd tosrc/packages/vue-dom1 directory and install it directly
pnpm install lodash
  1. In any directory, use the--filter parameters for installation;package_selector: corresponding name field 
pnpm install lodash --filter <package_selector>

shamefully-hoist

shamefully-hoistThe default is false.

  • false：node_modulesYou can only see direct dependencies in the suite undernode_modules/.pnpm Catalog;Inability to access dependencies installed locally by other subpackages, e.g., lodash installed by vue-dome2 is not accessible by vue-dome1

  • true: pulls all kits up to thenode_modules Cataloged under.Access to dependencies installed locally by other sub-packages, e.g. vue-dome2 installs lodash, which is accessible to vue-dome1.

// .npmrc

# pnpm configuration
shamefully-hoist=false

Supporting Code

GitHub - burc-li/pnpm-monorepo: vue3 + pnpm + monorepo project demo 🍎

reference document

Why pnpm+monorepo is a best practice for component library projects

Breaking Through Project Bottlenecks: Monorepo Tool Selection and Practice in 2024 | BEEZEN

GitHub - Tyh2001/vue3-pnpm-monorepo: 🐠 vue3 + pnpm + monorepo project demo

<Previous Next>