pnpm, npm, yarn package management tools "Comparison of pros and cons" and "Environment migration"

Preface

When the blogger was developing a front-end website, he found that as the number of projects developed gradually increased, the installed dependency packages became more and more bloated. The installation speed of dependency packages was also very slow and slow, and the same was true for multi-project development management. kind of hard. I had learned about pnpm before, but at that time I was worried about dependencies and other issues that might arise when changing the package management environment, and there was no urgent need, so I didn’t change it immediately

In summary, with the emergence of the above problems, changing the package management environment has gradually been put on the agenda, so this article will mainly briefly comparepnpm 和 npm / yarn and explain in detailHow to migrate topnpm

introduce

npm v2

In this period, simple recursive dependency method was mainly used, and finally highly nested dependencies were formed tree. Then it will cause the following problems: Repeated dependency nesting hell, waste of space resources, too slow installation speed, too long file path and other problems. Everyone is familiar with it, so I won’t explain it in detail here

npm v3

The v3 version has been significantly updated and has begun to adopt aflattened dependency structure. Such a dependency structure can very well solve the nesting hell problem of repeated dependencies, but it does create new problems such asthe flat dependency algorithm takes a long time a>

Explanation of official warehouse issue:npm@3 wants to be faster · Issue #8826 · npm/npm (github.com)

npm v5

In order to solve the time-consuming problem of the flat dependency algorithm mentioned above, npm introduced the package-lock.json mechanism. The function of package-lock.json is to lock the dependency structure of the project to ensure the stability of dependencies. Interested friends can directly check the official document

Official documentation:package.json | npm Docs (npmjs.com)

Note: In fact, before the package-lock.json mechanism appeared, locking the dependency structure could be achieved through npm-shrinkwrap, but npm-shrinkwrap was turned off by default and needed to be actively executed.

yarn

官网：Home page | Yarn (yarnpkg.com)

The first thing that needs to be mentioned is that yarn appeared in 2016, when npm was in the v3 period. In fact, the problems solved by yarn at that time were basically the problems solved by npm v5, including using yarn.lock and other mechanisms to lock version dependencies and implement concurrent network requests. Maximize network resource utilization, and secondly use the caching mechanism to achieve offline mode

In fact, a lot of npm is learning the mechanism of yarn. The above mechanism is basically implemented by npm. For now, there is not much difference between npm and yarn. The specific use of npm or yarn depends on personal needs.

pnpm

Chinese official website:pnpm - a fast, disk space-saving package manager | pnpm Chinese documentation | pnpm Chinese website

pnpm internally uses a content-addressed file system to store all files on the disk, so that there will be no repeated installations. When dependencies need to be used in the project, pnpm will only install them once. If used again, the dependency will be directly hard linked to the dependency, which greatly saves disk space and speeds up installation

Note: Hard links are multiple file names pointing to the actual content of the same file, while soft links (symbolic links) are independent files that point to the path of another file or directory.

Some people may say that yarn also has a flat installation method by default, butyarn has a unique PnP installation method. You can directly remove node_modules and replace the dependencies The package content is written on the disk, which saves the node file I/O overhead, which can also improve the installation speed. However,yarn PnP and pnpm mechanisms are different , andIn general, the installation speed of pnpm is faster than yarn PnP. For details, please see the official document below

Official documentation:Overview | Yarn (yarnpkg.com)

The last thing ispnpm supports monorepo multi-project management by default, which is especially suitable for increasingly complex front-end multi-project development, that is to say We no longer need lerna to manage multi-package projects, we can use pnpm + Turborepo as our project management environment

Official documentation for configuring workspace:Workspace | pnpm

Also, pnpm can also manage the nodejs version. You can directlyreplace nvm. The command is as follows

# 安装 LTS 版本
pnpm env use --global lts
# 安装指定版本
pnpm env use --global 16

migrate

The main problems during the migration process are as follows: when using npm or yarn to install dependencies, all packages are elevated to the root directory of the module directory. Therefore, source code can access dependenciesthat are not added as dependencies to the project. But by default, pnpm uses links to add only the project's direct dependenciesitems to the root of the module directory

This means that if package.json has no referenced dependencies, then it will not resolve. This is the biggest hurdle in migration. This can be done automatically using the auto-install-peers setting (false by default)

For multiple projects that use npm to install dependencies, it is time-consuming to delete dependent packages individually. We can use npkill. This tool can list Remove any node_modules directories on the system and the space they occupy. You can then select dependencies to remove to free up space

First install the package globally

npm i -g pnpm

The migration steps are as follows

1. First use npkill to delete the node_modules dependency package

2. Create the project root directory .npmrc, fill in the following content

auto-install-peers=true

3. Import the dependency lock file (pnpm-lock.yaml)

Ensure that the root directory has the following dependency lock files (npm-shrinkwrap.json, package-lock.json, yarn.lock)

Then execute the following command

pnpm import pnpm-lock.yaml

4, finally execute pnpm i to install dependencies

question

Generate dependency file warning

官方 issue 解释： Unmet peer dependencies and The command – pnpm/pnpm (github.com)

The following warning appears when generating pnpm-lock.yaml files

 WARN  Issues with peer dependencies found
.
└─┬ vuepress 1.9.9
  └─┬ @vuepress/core 1.9.9
    └─┬ vue-loader 15.10.1
      └─┬ @vue/component-compiler-utils 3.3.0
        └─┬ consolidate 0.15.1
          ├── ✕ unmet peer react-dom@^16.13.1: found 15.7.0
          └── ✕ unmet peer react@^16.13.1: found 15.7.0

This is because in npm 3, the package specified in peerDependencies (peer dependency) will no longer be forced to be installed, but will prompt us with a warning. pnpm will globally cache the downloaded dependency packages. If the dependency version of the global cache is the same as the one specified in the project package.json If the version is inconsistent, this kind of warninghint will appear

We can configure in the project's package.json to ignore the corresponding warning promptspeerDependencyRules

{
    
    
  "pnpm": {
    
    
    "peerDependencyRules": {
    
    
      "ignoreMissing": [
        "react"
      ]
    }
  }
}

Or to turn off the strict peer dependency mode directly in the .npmrc configuration file, you can add strict-peer-dependencies=false to the configuration file, or execute the following command

npm config set strict-peer-dependencies=false

Then a warning may also appear deprecated subdependencies found, which can be ignored for now

ghost dependency problem

Problems may occur幽灵依赖 when you finally install dependencies. The ghost dependency is not inpackage.json, but in the project or in the referenced package. Dependencies used

For example, we now use npm to install the v-viewer dependency, and viewerjs is a dependency of v-viewer. Due to the flat dependency mechanism , we can see the declared dependency in node_modules/v-viewer/package.json, even if the in the project root directory is not declared Dependencies, we can still use them, this is ghost dependencyviewerjspackage.jsonviewerjs

And now after we switch to pnpm, access to undeclared dependencies is not allowed by default. There are two solutions as follows

1. Install undeclared dependencies by yourself

Ghost dependency automatic scanning tool:@sugarat/ghost - npm (npmjs.com)

pnpm i -S viewerjs

Or some versions of pnpm will automatically cause ghost dependency errorsmissing peer ..., or you can directly install the following ones yourself without using the above scanning tool... Dependencies

2. Find the .npmrc file, configure the public-hoist-pattern or shamefully-hoist field in it, and promote the dependency to the root a>node_modules is solved in the directory, which is the so-called dependency improvement

Dependency improvement official documentation:.npmrc | pnpm

# .npmrc
# 提升含有 eslint(模糊匹配)、prettier(模糊匹配)、viewerjs(精确匹配) 的依赖包到根 node_modules 目录下
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=viewerjs

# 提升所有依赖到根 node_modules 目录下，相当于 public-hoist-pattern[]=*，与上面一种方式一般二选一使用
shamefully-hoist=true

Of course,it is highly not recommended to solve dependency problems in this way, as this does not fully utilizepnpm dependencies The advantages of access security have returned to the old path of npm / yarn.

Reference link

• What are the advantages of pnpm compared to npm/yarn - Nuggets (juejin.cn)
• Now I recommend pnpm instead of npm/yarn? - Nuggets (juejin.cn)
• How to migrate npm/yarn project to pnpm? - Nuggets (juejin.cn)
• A brief discussion on the differences between npm, yarn, and pnpm - Nuggets (juejin.cn)
• The vue supporting ecosystem has fully adopted pnpm - Nuggets (juejin.cn)
• Create an efficient Monorepo: Turborepo, pnpm, Changesets practice – UU errand running technical team (uupt.com)
• Experience using the new generation package management tool pnpm - Zhihu (zhihu.com)
• ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies | Tianwen - Focus on big front-end technology (tiven.cn)

This article is published by the blog post platform OpenWrite!