Build Vue3 component library from 0 (2): Monorepo project construction

This article is the second in a series of articles on building a Vue3 component library from 0. This article will lead you to use pnpm to build a simple Monorepo project, and complete the package association and testing

What is Monorepo

In fact, it is very simple, that is, a code base contains many projects, and although these projects are related, they are logically independent and can be maintained by different people or teams

Why use pnpm

pnpm is very convenient for package management, especially for a Monorepo project. Because there may be multiple packages (packages) for the component library we are about to develop, and these packages need to be tested locally, and it just so happens that pnpm supports it naturally. In fact, other package management tools, such as yarn and lerna, can also do it, but it is relatively cumbersome. And pnpm is very mature now, star component libraries like Vant and ElementUI are using pnpm, so this project also uses pnpm as a package management tool.

Use of pnpm

Install

npm install pnpm -g

Initialize the project

Executed in the project root directory , the file pnpm initwill be automatically generatedpackage.json

{
    
    
  "name": "easyest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package management

We create a new packages folder for subsequent storage of our various packages. pnpm initIf we have a package and b package, create a and b under packages (here is used to test the local reference of pnpm), and then perform initialization in the a and b directories respectively. Here we need to change the package name, I will change the name
here Cheng @easyest/a indicates that the a package belongs to the organization easyest. So remember to log in to npm and create a new organization before publishing; for example easyest. For example, the package.json of a at this time

{
    
    
  "name": "@easyest/a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Here our a package represents the toolkit, and the main attribute of package.json is the entry of the package, namely index.js.

So create a new index.js in the a directory

export default () => {
    
    
  console.log("我是@easyest/a包");
};

Then create a new index.js under the b package for reference

import sayHello from "@easyest/a";
sayHello();

insert image description here
We used the a package, so we need to install a first and execute it in the B directory pnpm add @easyest/a. Obviously, this will cause an error, because we have not associated the two packages, so how to associate it is actually very simple. Create a
new pnpm in the root directory The workspace file pnpm-workspace.yaml can associate packages

packages:
    - 'packages/**'

This means that all the packages in the packages directory are associated and then executed. pnpm add @easyest/a
insert image description here
Note that we use the import es6 syntax here, so we need to package.jsonadd fields in A and B. "type": "module"
We will find that a appears directly in the node_modules of the b directory The soft link. At the same time, the package.json of b has more dependency fields "@easyest/a": "workspace:^1.0.0", which means that it has been associated with the local @easyest/apackage.
insert image description here
At this time, we execute it in the b directory

node index.js

insert image description here
At this point, we have completed the association of the local package, and it will be more convenient to test the package in the future