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

Official documentation for configuring workspace: Workspace | pnpm

In addition, pnpm can also manage the nodejs version, which can directly replace nvm. The command is as follows

# Install LTS version
pnpm env use --global lts
#Install the specified version
pnpm env use --global 16

Migration

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 dependencies that are not added as dependencies to the project. But by default, pnpm only adds the project’s direct dependencies to the root of the module directory using links

This means that if package.json does not have a referenced dependency, 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 any node_modules directories in 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 .npmrc in the project root directory and 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

Official issue explanation: Unmet peer dependencies and The command – pnpm/pnpm (github.com)

The following warning appears when generating the pnpm-lock.yaml file

?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 dependencies) will no longer be forced to be installed, but will prompt us with a warning. pnpm will globally cache downloaded dependency packages. If the globally cached dependency version is inconsistent with the version specified in the project package.json, this hint warning

We can configure peerDependencyRules in the project’s package.json to ignore the corresponding warning prompts

{<!-- -->
  "pnpm": {<!-- -->
    "peerDependencyRules": {<!-- -->
      "ignoreMissing": [
        "react"
      ]
    }
  }
}

Or to turn off 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 the warning deprecated subdependencies found may also appear, which can be ignored for the time being.

Ghost dependency problem

The problem of ghost dependencies may occur when you finally install dependencies. Ghost dependencies are dependencies that are not in package.json, but are used in the project or in the referenced package.

For example, we now use npm to install v-viewer dependencies, and viewerjs is a dependency of v-viewer. Due to the flat dependency mechanism, we can install it in < You can see the declared viewerjs dependency in code>node_modules/v-viewer/package.json, even if the package.json in the project root directory does not declare viewerjs dependency, we can still use it, this is the ghost dependency

Now after we switch to pnpm, access to undeclared dependencies is not allowed by default. There are two solutions:

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 pop up the ghost dependency error missing peer.... You can also directly install the following ... without using the scanning tool above. > Dependencies

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

Dependency promotion official documentation: .npmrc | pnpm

# .npmrc
#Upgrade the dependency packages containing eslint (fuzzy matching), prettier (fuzzy matching), and viewerjs (exact matching) to the root node_modules directory
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=viewerjs

# Promote all dependencies to the root node_modules directory, which is equivalent to public-hoist-pattern[]=*. Generally use one of the two methods above.
shamefully-hoist=true

Of course, it is highly not recommended to solve dependency problems in this way. This does not take full advantage of pnpm‘s dependency access security, and falls back to npm / The old path of 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 OpenWrite, a blog posting platform!