There are so many package management tools, how to choose? Comparison and usage details of npm, yarn and pnpm!

1 Introduction

In the Vue project, we need to use many third-party dependent libraries, such as Vue Router, Vuex, Axios, Element UI, etc. These dependent libraries are usually provided in the form of NPM packages and require version management when used. Therefore, we need to use a package management tool to uniformly manage these dependent libraries to avoid version conflicts and cumbersome management.

Common Vue project package management tools include:

NPM: NPM (Node Package Manager) is the package management tool that comes with Node.js and is also one of the most commonly used package management tools. It can easily install, upgrade, and uninstall dependent packages, and can also publish its own packages to the NPM repository.

Yarn: Yarn is a package management tool launched by Facebook. It has the advantages of fast speed and good caching mechanism. Compared with NPM, Yarn can download dependency packages faster and supports offline mode.

PNPM: PNPM (Permissive NPM) is an emerging package management tool. Unlike NPM, PNPM uses a soft link-like method to install dependent packages into the node_modules directory of each project, thus avoiding a lot of duplication. Install.

These package management tools provide a convenient way to manage dependent libraries in the project, and can be well integrated into the Vue project.

1.1. Chinese official website address

The following are the official Chinese website addresses of these tools:

2、NPM

2.1. Introduction to NPM

NPM (Node Package Manager) is the default package manager for Node.js. It is one of the largest software registries in the world, with more than 1 million packages available for download. NPM allows developers to easily share, install, and manage code packages and dependencies in Node.js, and it is one of the key components for building modern JavaScript applications.

In addition to being a package manager for Node.js, NPM can also be used for front-end development. In front-end development, NPM is mainly used to install, manage and update various dependency packages of front-end projects, such as Vue, React, Angular and other common frameworks. NPM can help developers quickly and easily install and manage these dependencies so that they can be used in projects.

In short, NPM is a very important development tool that provides a rich functionality and ecosystem to help developers build applications more easily and efficiently.

2.2. NPM installation

For Mac systems, you can download the pkg installation package directly from the Node.js official website download address , and then click Install directly to complete the Node.js installation.

For Windows systems, you can refer to my other article " Windows Installation and Configuration Node.js "

If you need more detailed installation instructions, you can refer to the Node.js installation and configuration tutorial in the novice tutorial.

After installing Node.js, npm will be automatically installed on your computer, so there is no need to install it separately. You can enter the npm -v command on the command line to check whether npm has been installed correctly. If the version number is output, it means npm was installed successfully.

# 查看 Node.js 版本信息
node -v

# 查看 npm 版本信息
npm -v

2.3. NPM common commands

Here are some commonly used npm commands and their detailed introduction:

# 1、创建一个新的 Node.js 应用程序或模块，并在 package.json 文件中定义依赖项。
npm init

# 2、安装依赖项。如果在安装时没有指定包的版本号，则将安装最新版本的包。
npm install

# 3、安装指定的依赖项，并将其添加到 package.json 文件中的 dependencies 中。
npm install <package name> --save

# 4、安装指定的开发依赖项，并将其添加到 package.json 文件中的 devDependencies 中。
npm install <package name> --save-dev

# 5、将包安装为全局包，以便在系统的任何位置使用它们。
npm install -g <package name>

# 6、更新 package.json 文件中指定的所有包的版本。
npm update

# 7、更新指定的包的版本。
npm update <package name>

# 8、卸载指定的依赖项，并将其从 package.json 文件中的 dependencies 或 devDependencies 中删除。
npm uninstall <package name>

# 9、查看指定的包的详细信息，包括其版本、描述、关键字、维护者等。
npm view <package name>

# 10、搜索与指定关键字匹配的包。
npm search <keywords>

# 11、清除 npm 的缓存。
npm cache clean

# 12、启动 Node.js 应用程序。
npm start

# 13、运行测试套件。
npm test

# 14、运行 package.json 文件中指定的脚本。
npm run <script name>

# 15、列出当前项目中已安装的所有包及其依赖关系。
npm ls

# 16、检查当前项目中已安装的包是否有过时的版本。
npm outdated：

# 17、查看指定包的详细信息。
npm view <package name>

# 18、查看指定包的摘要信息。
npm info <package name>

# 19、将当前目录下的代码发布为一个 npm 包。
npm publish

# 20、查看当前登录的 npm 用户名。
npm whoami

The above are some commonly used npm commands and their detailed introduction, which can be used according to your needs.

2.4. Create project with NPM

To create a Vue project, you can use the Vue CLI (Command Line Interface) command line tool to generate the basic project structure and files.

2.4.1、will enter

vue init is a project creation command used in Vue CLI 2.x version. It can quickly create a template project, such as pulling a Vue project template from a GitHub template for initialization. You can interactively select the required template and some configuration information through the command line. The vue init command has been replaced by vue create in Vue CLI 3.x and will no longer be updated.

Example of using vue init to create a Vue project:

# 全局安装 Vue CLI 2.x
npm install -g vue-cli

# 查看 Vue 版本信息
vue --version

# 从 GitHub 上拉取 webpack 模板
vue init webpack my-project

# 安装依赖
cd my-project
npm install

# 运行项目
npm run dev

2.4.2、vue create

vue create is a project creation command used in Vue CLI 3.x version. It can quickly create a new Vue project, allowing developers to quickly build a basic Vue project structure.

vue create provides default configuration and plug-in management, and developers can configure and manage according to their own needs.

Example of using vue create to create a Vue project:

# 全局安装 Vue CLI 3.x
npm install -g @vue/cli

# 查看 Vue 版本信息
vue --version

# 创建一个新项目
vue create my-project

# 安装依赖
cd my-project
npm install

# 运行项目
npm run serve

When creating a project, vue create provides more configuration options and plug-ins, such as using TypeScript, using Vue Router, using Vuex, and so on. At the same time, using vue create to create a project can add plug-ins directly to the project, without the need to add them manually like vue init.

3、Yarn

3.1. Introduction to Yarn

Yarn is a JavaScript package manager. It is an open source project jointly maintained by Facebook, Google, Tilde and other community members. Yarn has been improved and enhanced based on NPM to improve the installation speed and reliability of dependent packages.

Compared with NPM, Yarn has the following features:

Fast: Yarn installs dependent packages faster than NPM by installing dependent packages in parallel.
Reliable: Yarn will generate a lock file (yarn.lock) to ensure that the versions of dependent packages installed each time are the same, thus avoiding the problem of version inconsistency.
Security: Yarn ensures that the installed dependency packages are safe and have not been tampered with through hash verification of the dependency packages.
Offline mode: Yarn can run without an Internet connection, increasing developer flexibility.

It should be noted that Yarn and NPM are essentially package management tools, and they can both manage dependency packages of JavaScript projects. When using Yarn or NPM, it is recommended to understand its usage and commands to better manage the project's dependency packages.

3.2. Yarn installation

If you have Node.js installed, you can install Yarn through npm. There are two ways to install Yarn through npm:

1. Global installation

# 全局安装
npm install -g yarn

# 查看 Yarn 版本信息
yarn -v

This method will install Yarn into the global environment, so that the yarn command can be used anywhere.

2. Local installation

# 本地安装
npm install yarn

# 查看 Yarn 版本信息
yarn -v

This method will install Yarn into the node_modules folder of the current directory. Yarn can be run through the ./node_modules/yarn/bin/yarn command.

Note: You can use the following command to install a specific version of Yarn

# 查看可用的 Yarn 版本
npm view yarn versions

# 全局安装特定版本
npm install -g yarn@<version>

# 本地安装特定版本
npm install yarn@<version>

# 查看 Yarn 版本信息
yarn -v

3.3. Yarn common commands

Here are some commonly used Yarn commands and their detailed introduction:

# 1、该命令将引导您创建一个新的 package.json 文件。您可以提供一些信息，例如项目名称、版本号、作者、描述等。
yarn init

# 2、该命令将安装指定的软件包并将其添加到项目依赖项中。您可以使用 @ 版本前缀来安装特定版本的软件包。例如：yarn add [email protected]。
yarn add [package]

# 3、该命令将从项目依赖项中删除指定的软件包。
yarn remove [package]

# 4、该命令将更新指定软件包的版本。您可以使用 @ 版本前缀来更新特定版本的软件包。例如：yarn upgrade [email protected]。
yarn upgrade [package]

# 5、该命令将根据项目中的 package.json 文件安装所有依赖项。如果您在运行时指定了 --production 标志，则只会安装生产依赖项。
yarn install

# 6、该命令将清除 Yarn 的缓存。这可能会释放一些磁盘空间并解决某些依赖项问题。
yarn cache clean

# 7、该命令将全局安装指定的软件包。这通常用于安装全局命令行工具。
yarn global add [package]

# 8、该命令将从全局安装中删除指定的软件包。
yarn global remove [package]

# 9、该命令将列出当前项目中的所有依赖项。
yarn list

# 10、该命令将运行项目中指定的脚本。例如：yarn run start。
yarn run [script]

# 11、该命令将运行项目中的测试脚本。
yarn test

# 12、该命令将根据项目中的配置文件构建项目。
yarn build

# 13、该命令将发布您的软件包到 Yarn 存储库中。
yarn publish

# 14、该命令将显示有关指定软件包的详细信息。
yarn info [package]

# 15、该命令将使您登录到 Yarn 存储库。
yarn login

# 16、该命令将使您从 Yarn 存储库注销。
yarn logout

# 17、该命令将允许您将本地软件包链接到项目中。
yarn link [package]

# 18、该命令将从项目中取消链接指定的软件包。
yarn unlink [package]

# 19、该命令将显示指定软件包的依赖项信息。
yarn why [package]

# 20、该命令将显示项目依赖项的许可证信息。
yarn licenses ls

The above are some commonly used Yarn commands and their detailed introduction, which can be selected and used according to your needs.

3.4. Yarn creation project

3.4.1、yarn create vue-app

yarn create vue-app creates a project based on Vue CLI 2.x version. This version of Vue CLI uses webpack for packaging and requires configuring some basic project information and plug-ins.

Use yarn create vue-app to create a Vue 2.x project:

# 创建一个 Vue 2.x 项目
yarn create vue-app my-project

# 安装依赖
cd my-project
yarn install

# 运行项目
yarn serve

3.4.2、yarn create vite-app

yarn create vite-app creates a project based on Vue CLI 3.x version. This version of Vue CLI uses the vite build tool, which has faster build speed and less configuration, and is suitable for smaller projects and rapid prototype development. .

Use yarn create vite-app to create a Vue 3.x project:

# 创建一个 Vue 3.x 项目
yarn create vite-app my-project --template vue

# 安装依赖
cd my-project
yarn install

# 运行项目
yarn serve

In the above command, my-project is the project name, which can be changed according to the actual situation. At the same time, the –template parameter is used to specify the created project template. If not specified, the default is the JavaScript template. For Vue 3.x projects, --template vue needs to be specified.

4、PNPM

4.1. Introduction to PNPM

PNPM is a Node.js package management tool, similar to NPM and Yarn. PNPM uses a different method from NPM and Yarn to manage Node.js packages. It uses hard links to share dependent packages, thereby reducing storage space usage and installation time. At the same time, PNPM can also install and use Node.js modules globally and locally like NPM and Yarn. PNPM also provides some other features, such as support for automatically cleaning up unused packages, and support for multiple versions of Node.js and NPM.

Compared with NPM and Yarn, PNPM has the following advantages:

Save disk space: PNPM uses hard links to share dependent packages, so only one copy of the dependent package needs to be stored, which can greatly save disk space.
Accelerated installation: PNPM can download and install multiple dependent packages at the same time, thus accelerating the installation process.
Better stability: PNPM can share dependent packages among multiple projects, thereby reducing conflicts and version inconsistencies between different versions of packages.

The main disadvantage of PNPM is that its community and ecosystem are relatively small compared to NPM and Yarn, so support and documentation may be lacking in some aspects.

4.2. PNPM installation

1. Install globally using npm

# 使用 npm 全局安装
npm install -g pnpm

# 查看 pnpm 版本信息
pnpm --version

2. Use yarn to install globally.

# 使用 yarn 全局安装
yarn global add pnpm

# 查看 pnpm 版本信息
pnpm --version

NOTE: A specific version of pnpm can be installed using the following command

# 查看可用的 pnpm 版本
npm view pnpm versions

# 使用 npm 全局安装特定版本
npm install -g pnpm@<version>

# 使用 npm 本地安装特定版本
npm install pnpm@<version>

# 查看 pnpm 版本信息
pnpm --version

4.3. PNPM common commands

Here are some commonly used pnpm commands and their detailed introduction:

# 1、用于安装项目中的所有依赖。
pnpm install

# 2、用于安装指定的依赖包，例如 pnpm install react。
pnpm install [package]

# 3、用于全局安装指定的依赖包，例如 pnpm install --global typescript。
pnpm install --global [package]

# 4、用于更新项目中的所有依赖。
pnpm update

# 5、用于更新指定的依赖包，例如 pnpm update react。
pnpm update [package]

# 6、用于删除指定的依赖包，例如 pnpm remove react。
pnpm remove [package]

# 7、用于列出当前项目中已安装的所有依赖包。
pnpm list

# 8、用于列出当前系统中已全局安装的所有依赖包。
pnpm list --global

# 9、用于列出当前项目中已安装的所有依赖包及其直接依赖项。
pnpm list --depth=1

# 10、用于查看指定依赖包的详细信息，例如 pnpm info react。
pnpm info [package]

# 11、用于将指定的依赖包添加到 devDependencies，例如 pnpm add jest --save-dev。
pnpm add [package] --save-dev

# 12、用于将指定的依赖包添加到 dependencies，例如 pnpm add react --save。
pnpm add [package] --save

# 13、用于全局安装指定的依赖包，例如 pnpm add typescript --global。
pnpm add [package] --global

# 14、用于重新构建项目中的所有依赖。
pnpm rebuild

# 15、用于运行项目中的脚本命令，例如 pnpm run start。
pnpm run [script]

# 16、用于查看本地包存储状态。
pnpm store status

# 17、用于清理本地存储的未被任何项目使用的包。
pnpm store prune

# 18、用于将指定的依赖包添加到本地存储，以便其他项目使用。
pnpm store add [package]

# 19、用于启动本地包服务器。
pnpm server

# 20、用于在所有项目中执行指定命令，例如 pnpm recursive install。
pnpm recursive [command]

The above are some commonly used pnpm commands and their detailed introduction, which can be selected and used according to your needs.

4.4. PNPM creation project

The way you create a Vue project has nothing to do with PNPM and everything to do with the scaffolding tool you use.

No matter which method you use to create a Vue project, you can use PNPM in the project directory to install dependencies. For example, after using Vue CLI to create a project, you can use pnpm install to install dependencies after entering the project directory.

4.4.1、pnpm create vue-app

pnpm create vue-app creates a project based on Vue CLI 2.x version. This version of Vue CLI uses webpack for packaging and requires configuring some basic project information and plug-ins.

Use pnpm create vue-app to create a Vue 2.x project:

# 创建一个 Vue 2.x 项目
pnpm create vue-app my-project

# 安装依赖
cd my-project
pnpm install

# 运行项目
pnpm serve

4.4.2、pnpm create vite-app

pnpm create vite-app creates a project based on Vue CLI 3.x version. This version of Vue CLI uses the vite build tool, which has faster build speed and less configuration, and is suitable for smaller projects and rapid prototype development. .

Use pnpm create vite-app to create a Vue 3.x project:

# 创建一个 Vue 3.x 项目
pnpm create vite-app my-project --template vue

# 安装依赖
cd my-project
pnpm install

# 运行项目
pnpm serve

5. One note per day

5.1, server and run dev

5.1.1、yarn serve 和 yarn run dev

yarn serve and yarn run dev are both commands used to start the front-end project development environment, but the corresponding usage scenarios and implementation methods are different.

Normally, yarn run dev is a script command configured in the package.json file to start the development environment service. for example:

{
    
    
  "scripts": {
    
    
    "dev": "webpack-dev-server --open"
  }
}

In the above example, when running the yarn run dev command, the webpack-dev-server --open command is actually executed, which is used to start a development environment server, monitor file changes in real time, and rebuild the project.

Yarn serve is an independent command and requires the serve package to be installed first. Its function is also to start a local server for debugging and testing in the development environment. For example, we can install and use serve with the following commands:

# 安装 serve 包
yarn global add serve

# 在当前目录启动一个服务器，默认使用 5000 端口
yarn serve

By default, yarn serve will start a local server in the current directory, which can be accessed through http://localhost:5000 in the browser. Compared with yarn run dev, yarn serve does not require script commands to be configured in the project, making it more convenient and faster.

5.1.2, pnpm server and pnpm run dev

pnpm server and pnpm run dev are both commands to run the project, but the specific difference depends on the project's configuration file and script configuration.

Generally speaking, pnpm run dev is a script command defined in the project and used to start the project in development mode. Development mode generally enables hot update, debugging mode and other functions to facilitate developers to debug and view the effects of the project in real time.

pnpm server is a more general command that can be entered directly in the terminal to start a web server and use the current directory as the root directory of the website. This command can be used not only for front-end projects, but also for the development and deployment of some static websites.

It should be noted that the usage and effect of specific commands depend on the specific configuration and script commands of the project. If you are not sure which command should be used, you can refer to the project documentation or ask the developer.

5.2. Version relationship between Node.js, Vue.js, npm, Yarn and PNPM

There are relationships between different versions of Node.js, Vue.js, npm, Yarn and PNPM. The following is a summary of the relationship between them:

5.2.1. Relationship between Node.js version and Vue.js version

There is a certain correlation between the Node.js version and the Vue.js version. Different Vue.js versions have different requirements for the Node.js version. Specifically, Vue.js 2.xx supports Node.js version 8.9 or higher, and Vue.js 3.xx supports Node.js version 10 or higher.

Node.js is the running environment of Vue.js, so the version compatibility of Vue.js depends on the version compatibility of Node.js.

It should be noted that if the Node.js version is too low or too high, the Vue.js project may not run properly. Therefore, when using Vue.js, you need to choose the appropriate Node.js version according to the specific Vue.js version requirements, and keep the Node.js version stable and updated.

5.2.2. Relationship between Node.js version and npm version

There is a certain correlation between the Node.js version and the npm version because npm is installed with Node.js. Normally, when you upgrade Node.js, the version of npm is also updated. However, sometimes you may need to manually upgrade the npm version to meet the needs of your project.

Use the node -v command to check the installed Node.js version, and then use the npm -v command to check the corresponding npm version.

It should be noted that in Node.js v0.6.x and below, npm is an independent package manager and needs to be installed and upgraded manually. Starting with Node.js v0.8.x, npm is installed as the default package manager. Therefore, in these older Node.js versions, you may need to manually install or upgrade the npm version.

5.2.3. Relationship between Node.js version and Yarn version

Yarn is a package management tool independent of Node.js, but it requires a Node.js running environment.

The relationship between Node.js version and Yarn version is as follows:

Yarn 1.xx version requires Node.js version >= 10.13.0.

Yarn 2.xx version requires Node.js version >= 12.13.0.

This is because the Yarn 2.xx version uses new features of Node.js 12.xx, and older versions of Node.js do not support these features. Therefore, Node.js 12.13.0 or higher must be installed before installing Yarn 2.xx.

It should be noted that the latest version of Yarn may be different under different operating systems. Therefore, when installing Yarn, you need to select the appropriate Yarn version according to your operating system and Node.js version.

5.2.4, correlation between Node.js version and PNPM version

PNPM is a package management tool independent of Node.js, but it requires a Node.js running environment.

The correlation between the Node.js version and the PNPM version is similar to the correlation between the Node.js version and the npm version, because PNPM is an improved version based on npm. Therefore, you need to install Node.js and npm first when installing PNPM. Generally speaking, PNPM will support the latest version that is compatible with the current Node.js version. The specific compatible versions can be viewed in PNPM's official documentation. In addition, PNPM also provides support for specific Node.js versions. You can use a specific version of PNPM to install PNPM for a specific Node.js version. For example, use the npm i -g [email protected] command to install PNPM 6.14. 11 version to work with Node.js v14.x. In short, the version of PNPM needs to be compatible with the current Node.js version to ensure normal use.

5.2.5, correlation between Vue.js version and npm, Yarn, PNPM version

There is no direct correlation between the Vue.js version and the version of the package management tool (npm, Yarn, PNPM). Vue.js officially specifies the minimum requirements for the supported Node.js version and npm version when each version is released. These requirements are not directly related to the version of the package management tool, but the package management tool needs to be in the specified Node.js version. and npm version to work properly.

For example, the minimum Node.js version supported by Vue.js 2.x is 4.0.0, and the minimum npm version supported is 3.0.0. If you want to use Yarn or PNPM to manage dependencies, you need to ensure that the installed version of Yarn or PNPM can work properly in the environment of Node.js 4.0.0 and npm 3.0.0.

Note that some versions of Vue CLI may require the use of specific versions of package management tools. For example, Vue CLI 3.0 requires Yarn 1.x and does not support Yarn 2.x. When using Vue CLI, it is recommended to check the requirements and recommendations in the official documentation to ensure the compatibility of the development environment.

6. Summary

npm, yarn, and pnpm are all tools for managing JavaScript packages and dependencies. There are some differences between them. Here is a summary of their comparison:

Installing dependencies speed
Both npm and yarn require downloading and unzipping the entire package, but pnpm uses a unique method to avoid this problem. It will store the package locally and create a symbolic link in the project. This means that when using pnpm, there is no need to download duplicate packages locally, so installation is faster.
Caching Mechanism
npm and yarn both have their own caching mechanism to reuse the same dependencies while installing them to save time and space. pnpm also has a caching mechanism, but unlike npm and yarn, it stores packages locally and uses symbolic links to link them into the project. This allows pnpm to reuse dependencies faster because they don't need to be unpacked from the cache.
The commands
npm, yarn, and pnpm all have similar commands, such as install, remove, update, etc. The difference between them is some extra commands, for example yarn has workspace command which can be used to handle multiple packages.
Cross-platform support
Both npm and yarn are cross-platform and can run on Windows, macOS and Linux. pnpm is also cross-platform supported, but performance on Windows may be affected.
Community support
npm is one of the earliest JavaScript package managers and therefore has huge community support. yarn also has a huge community, but it is smaller than npm. pnpm is one of the newest package managers, so it has less community support than npm and yarn.

Overall, choosing which package management tool to use depends on personal needs and project requirements. If you need to install dependencies quickly and have a good caching mechanism, you can choose pnpm. If you need to have a lot of community support and a broad ecosystem, you can choose npm. If you need to support workspaces and locked files, you can choose yarn.