As a front-end programmer, you must be familiar npmwith yarnthese two package managers. So have you heard of pnpm? What is it? What is the difference between npm and yarn, and what is its function? This article will solve the following problems:
pnpmWhat is it? what's the effectpnpmWhat are the advantages and features?pnpmnpmWhat is the difference between andyarn?pnpmHow to install and use
1.What is pnpm
Fast, disk space-saving package management tool
From pnpmthe introduction, we can see that it is actually a package management tool, and its function is the npmsame yarnas . So since the function is the same, why is there another one pnpm? From the official documentation we can see that its advantages are:
- Package installation is extremely fast
- Efficient disk space utilization
2. pnpmWhat are the advantages and characteristics?
We mentioned above that the advantages of pnpm are extremely fast package installation and efficient disk space utilization .
Package installation is extremely fast
It is twice as fast as the traditional solution to install packages. The following are the official benchmarks (comparing npm, pnpm, Yarn Classic, and Yarn PnP). In a variety of common situations, the speed of executing the install is compared.
Why is pnpm faster than other packet processors?
Mainly thanks to its package management mechanism, it saves disk space and improves installation speed (that is, the second advantage)
Efficient disk space utilization
pnpm's node_modules layout uses symbolic links to create a nested structure of dependencies. node_modules Every file in every package is a hard link from content-addressable storage.
So why is it said that pnpm 基于内容寻址is more efficient in utilizing disk space?
- The same package will not be installed repeatedly. When using
npm/yarnit, if there are 100 package dependenciesexpress, then it may be installed 100 timesexpress, and this part of the code will be written in 100 places on the disk. Butpnpmthis part of the code will only be written in one place, and hard links will be used directly for later use.
- Even if there are different versions of a package, pnpm will reuse code from previous versions to a great extent. For example, when comparing the upgrades of the two versions of
express4.18.2and , only 19 new updated packages were re-downloaded.epxress5.0.0-beta.1epxress5.0.0-beta.1
3. What is the difference between pnpmand ?npmyarn
pnpmThe difference from npmand yarnis mainly explained in terms of package dependency management.
npm2 dependency management
The dependency management generated by npm2 is relatively simple and direct. It will be directly filled in the local directory structure according to the dependency tree structure of the installation package:
The advantage of this method of npm2 is that 比较的直观, but the disadvantage is also obvious.
- Hierarchical dependencies are too deep
- The same version of the same package will be downloaded multiple times, resulting in low utilization and taking up a lot of disk space.
npm3/yarn dependency management
In response to the two shortcomings of npm2, npm3 has made a change. It no longer uses a nested structure, but flattens dependencies. This can solve the problems of deep hierarchical dependencies and package utilization. Then the above dependencies The relationship will look like this:
It looks like this in the file:
We can see that [email protected]it is the same as the [email protected]referenced version, so it will be tiled below. So what happens if the referenced package version is different? Like , wait for these packagesacceptsnode_modulesdebughttp-errorsstatuses
[email protected]Introduced are:[email protected],[email protected],[email protected][email protected]Introduced are:[email protected],[email protected],[email protected]
At this point, node_modulesthe structure looks like this:
As for why [email protected]the dependent packages are in the root directory node_modules, this is one of npm's own rules.
npm 3.xhas adopted a flat approach to installation from the beginning node_modules. During installation, npm will traverse the entire dependency tree. Whether it is a direct dependency of the project or a sub-dependency, it will be installed in the root directory first node_modules. When encountering a package with the same name, if it is found that it exists in the root directory node_modulesbut does not meet the requirements , the package that meets the conditions semver-rangewill be installed in the sub-dependency .node_modules
This tiling method of npm3 does solve the problem of deep hierarchical dependencies and package utilization, but it also introduces other problems:
- Packages that are not manually introduced, such as
[email protected]dependenciescookie, are manually introduced in the project, but they can still be used. This will cause express to change its policy and stop using cookies, and cookies are used in our project. This will cause Project cannot be started - Although npm shares the same version of dependencies, if the versions are different, npm will still completely download two different versions, which will also cause dependency redundancy.
In order to solve some problems caused by npm3, pnpm adopts another way to manage dependencies: pnpm's node_modules layout uses symbolic links to create nested structure tubes of dependencies.
node_modules Each file in .pnpmeach package is a hard link from content-addressable storage.
This is node_modules the only "real" file in . Once all packages are hard linked to node_modules, symbolic links are created to build a nested dependency graph structure.
We use pnpm to install [email protected]and [email protected], the generated directory is as follows:
The dependencies in node_modulesare only package.jsonthe dependencies manually introduced in expressand koa. If you are careful, you will find an arrow behind these two files, and this arrow is the soft link used by pnpm to point to the .pnpmreal file of the file:
These files will be stored uniformly in memory. If there are dependencies on different versions, pnpm will only download the different files in different versions and add them to the store.
例如，如果某个包有100个文件，而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件，而不会因为仅仅一个文件的改变复制整新版本包的内容。All files are stored somewhere on your hard drive.
当软件包被被安装时，包里的文件会硬链接到这一位置，而不会占用额外的磁盘空间这允许你跨项目地共享同一版本的依赖。
Install and use
npm install -g pnpm
| Command | Meaning |
|---|---|
pnpm add sax |
Save to dependencies |
pnpm add -D sax |
Save to devDependencies |
pnpm add -O sax |
Save to optionalDependencies |
pnpm add -g sax |
Install package globally |
pnpm add sax@next |
next Install from tag |
pnpm add [email protected] |
Install specified version 3.0.0 |
Download dependencies
pnpm install or pnpm i
删除依赖
pnpm remove or pnpm rm or pnpm uninstall or pnpm un