Front-end project management & the role of yarn workspace and lerna

1. yarn

npmThe installation of dependencies is very slow, so there is one yarn. yarnThe downloaded dependency packages will be cached. When other projects are installed again, they can be directly used in the cache. The download speed is greatly improved. Of course, this is just one yarnof functions. Next, I will Other features are also introduced.

1.1 Global installation

npm install yarn --global 

1.2 use

1.2.1 Create a new project such asyarn-example

1.2.2 Initializationpackages.json

yarn init -y

1.2.3 Install a dependency such aslodash

yarn add lodash

1.2.4 Create a new main.jsfile and import it for use

// main.js
const lodash = require('lodash')
console.log(lodash)

The project structure is shown in the figure

Now the speed of downloading lodash for other projects will be greatly improved. Of course, it cannot be reflected by only one dependent package.

2. yarn workspace

yarn workspaceIt is also one of the very useful functions yarnin . Simply put, it is to node_modulespromote the of each project to node_modulesthe , forming the effect of multiple projects reusing the same set of dependent packages.

2.1 configuration

2.2.1 package.jsonAdd the following two options in

"dependencies": {
    
    
   .....
},
"private": true,
"workspaces": ["packages/*"]

privateIndicates that this is a private project and will not be published to npm
packages/*Indicates that each directory (project) under packages represents a workspace

2.2 use

2.2.1 Create a new packagesdirectory and create two new projects in it:project1 / project2

2.2.2 project1and create a new example project2respectively main.js, and then fill in the following code

// project1/main.js & project2/main.js
const lodash = require('lodash')
console.log('lodash', lodash)

2.2.3 Next, execute the respective in project1 or project2 main.jsto see the effect

The project structure is shown in the figure

2.3 Install dependency packages for a project

For example, if we want to project1add vuedependencies for , we must first initialize it in project1the project packages.json, nameand means workspace name
Now let's start installing vue

yarn add workspace project1 add vue

If you want to uninstall

yarn add workspace project1 remove vue

Note: The dependencies after vue installation are still placed node_modulesin instead project1of , so you can project2also refer to vue. You may be curious, since you project2can refer to project1the specified installation of vue dependencies, what is the difference between the above command and the ordinary yarn add vue? The answer is different from where the dependency properties are stored

1. yarn add vueDependency option properties will be placed in packagse.json in the root directory
2. yarn workspace project1 add vueDependency option properties will be placed project1in packagse.json

Why did you do this? The reason is simple. If a project needs to be extracted separately later, we can run the project normally according to the packages.jsondownload- .

So reasonable installation dependencies are necessary!

Another situation is that a certain project will also have its own node_modules. This situation occurs when projects use the same dependencies but different versions. For example, project1 uses it "axios": "^0.27.2"while project2 uses it "axios": "0.21.1". Interested students can try it themselves.

Supplement: If you really want all dependencies of a project to be installed only in your own project, you can configure nohoistoptions

"private": true,
"workspaces": {
    
    
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "**/project1/**/*"
  ]
},

In this way, the dependencies of project1 will be placed in its own directory, but other projects can no longer refer to the dependent packages of project1.

3. the clays

Yarn workspace can solve the problem of multiple project dependencies, and lernacan solve the problem of running, building and releasing versions of multiple projects, which is very beneficial for multi-project management, and lerna and yarn workspace can be used in combination.

3.1 Installation

npm install lerna --global 

3.2 configuration

3.2.1 We continue to configure in yarn-examplethe project , first run in the root directory

lerna init

This command will create a new lerna.jsonconfiguration with the following content:

{
    
    
  "packages": [
    "packages/*"
  ],
  "useNx": false,
  "version": "0.0.0"
}

packages/* is the same as yarn workspace to specify the project directory.

3.3 use

Next, we will use a lerna command to run the respective buildscript , assuming that the respective main.jscontents of project1 / project2 are as follows:

buildthe commands are as follows

Now we just need to run in the root project:

lerna run build

The effect is as shown in the figure:

Is it very convenient? If you want to run the respective run commands, you only lerna run runneed to , which is not demonstrated here.

3.4 Version Management

Next, I will demonstrate how to automatically change versionthe version . lerna versionThe command will be used here, but this command has prerequisites:

1. project initializedgit
2. It can only be used git commitafter , otherwise an error will be reported

We follow the above process, first initialize git locally and make commit and

then run

lerna version

After running, you will be prompted to choose a version format. Here I choose Patch from 0.0.1 as the starting version.

Next, you will be asked to confirm whether to change, because the versions in our package.json all start from 1.0.0 by default, and they will be overwritten here.

The next time we re-commit some local changes and lerna versionenter , the version of these projects will become 0.0.2, and so on, no need to manually change, isn't it very convenient? At the same time, the version lerna.jsoninside will also be updated automatically.

For those who are interested in other functions of lerna, please refer to the official documentation.

4. Summary

• yarn workspace allows multiple projects to share a set of dependencies
• Lerna can execute the script commands of each project with only one command, and can also automate the version control of these projects.
• yarn workspace + lerna can be used at the same time

over!

References:
https://www.npmjs.com/package/yarn
https://classic.yarnpkg.com/lang/en/docs/workspaces/