Learn two powerful Node package managers: npm and yarn

This article will take you through the two powerful package managers of Node.js: npm and yarn. I hope it will be helpful to you!

Node.js quick introduction course: enter to learn

The first step to learn Node is to understand node’s package manager : npm . I believe everyone is familiar with npm , because we often use it to download some package resources.

But because npm ’s resource library (https://www.npmjs.com/) is abroad, the speed of downloading resources using it is relatively slow, so third-party node包管理器such as yarn and domestic ones are synchronized with npm warehouses. Updated Taobao mirror (cnpm)

Next we will learn these contents in depth, let’s get started!

The Node series column has begun to be updated. Follow the blogger, subscribe to the column, and learn Node without getting lost!

1. Use of npm

what is npm

Before using npm , you must first understand what npm is. In the first article of the Node series column [Node.js | The only way from front-end to full stack], it is mentioned npm is Node ’s open source warehouse and is the largest in the world. Open source warehouse

The address of this warehouse is: https://www.npmjs.com/

As of March 17, 2020, npm served 1.3 million packages to approximately 12 million developers, who downloaded them 75 billion times per month

To download and use the resources in the npm warehouse, you can use npm的指令(starting with npm , such as npm i axios download axios ) or use other third-party instructions (third-party Node包管理器), such as yarn, etc.

Official statement: npm is a package management and distribution tool for NodeJS

Package management is reflected in the fact that it is a NodeJS warehouse, which stores and manages various NodeJS software packages.

The distribution tool is embodied in using npm的指令to download packages in the npm warehouse.

When we configure the NodeJS environment, npm指令模块is installed along with NodeJS . We can run npm -v through the terminal to view the installed version:

But if the default installed npm version is too old, you can also manually install and update npm yourself:

 npm i npm@latest -g

@latest represents installing the latest version, -g represents global installation, these npm instructions will be discussed later.

A magical thing can be found above. We are installing npm through npm . Can we install it ourselves?

This is actually easy to understand. npm的指令模块is also stored in the npm warehouse as a package, and the name of this package is npm . See the npm address:

So what we generally call npm just refers to the command module of npm (the package named npm)

But in fact, the word npm refers to npm指令模块, and also refers to npm the NodeJS open source warehouse itself, so we download npm in npm (this npm represents the open source warehouse of NodeJS) (this npm represents the open source warehouse named npm This package, this package is npm's command module)

npm common commands

There are many npm instructions. Here we only list the commonly used ones. For more information, please see the npm official documentation.

• npm init : generate package.json

  
  

• npm install : Download all resources recorded in package.json

• npm install 包名: Download the specified package to the current directory

• npm uninstall 包名: uninstall the specified package in the current directory

• npm update 包名: Update the specified package in the current directory. If no package name is added, all packages in the current directory will be updated.

• npm outdated 包名: Check whether the specified package in the current directory is outdated . If no package name is added, all packages in the current directory will be checked.

• npm info 包名: Get detailed information about the package in the current directory

• npm list : View all packages installed in the current directory and their dependencies and display the version number ( list can be abbreviated as ls )

• npm list 包名: View the version number of the specified package installed in the current directory ( list can be abbreviated as ls )

A few additional points:

1. install can be abbreviated as i , such as: npm install axios can be abbreviated as npm i axios

2. uninstall can be abbreviated as un

3. Add the @ symbol after the package name to specify the version of the package, such as: npm i md5@1 downloads version 1 of md5, npm i md5@latest means downloading the latest version of md5

npm command suffix

• -g : Specify the global environment

  The npm command defaults to operating in the current directory. Adding -g specifies operating in the global environment . As mentioned above, install the latest version of npm globally: npm i npm@latest -g , so that npm can be used in any directory.

• --save can be abbreviated as -s : specify dependencies in the production environment (recorded in dependencies )

  After npm5 version, the default is --save . For example, axios needs to be installed in both production environment and development environment: npm i axios -s

• --save-dev can be abbreviated as -D : specify the dependencies in the development environment (recorded in devDependencies )

  To install babel that is not needed in the production environment (only used in the development environment): npm i babel -D

• --save-prod can be abbreviated as -P : same as --save

• --save-optional can be abbreviated as -O : specify optional dependencies (recorded in optionalDependencies )

• --no-save : will not be recorded in package.json

For the specific functions and differences of -g，--save，--save-dev please see my article: The difference between npm install -g/–save/–save-dev

The npm command suffix can also be placed in front of the package name: npm i -g npm@latest

Dependency package management

In npm , the well-known dependencies are: dependencies and devDependencies

In addition, it actually includes:

• peerDependencies ,

• optionalDependencies

• bundledDependencies / bundleDependencies

Several dependencies, including these, are recorded in package.json :

Above we mentioned these dependencies when talking about npm command suffixes . Here is a detailed description of what they represent:

dependencies and devDependencies

Check out my other article: The difference between npm install -g/–save/–save-dev

peerDependencies

You can check out the article by the big guy: Understand peerDependencies in one article

optionalDependencies

Optional dependencies. If there are some dependent packages that can still run even if the installation fails or you want npm to continue running, you can use optionalDependencies . In addition, optionalDependencies will overwrite the dependencies with the same name in dependencies , so don’t write them in both places.

bundledDependencies / bundleDependencies

Packaging dependencies, bundledDependencies is an array object containing dependent package names. When publishing, the packages in this object will be packaged into the final release package. The packages in the array must first be declared in devDependencies or dependencies , otherwise the packaging will report an error.

Package version issues that need attention in package.json

The version information of all packages downloaded through npm will be recorded in package.json

When running npm i it will be downloaded based on the package information recorded in package.json . Its download rules are as follows:

• When the package version starts with ^ (default) , the large version will be locked

   // package.json
  "dependencies": {
  "md5": "^2.1.0" // } starting with ^,

  Through npm i the latest version of md5 2.xx (the latest version under the two major versions) will be installed, which is not necessarily 2.1.0, but may also be 2.3.0

• When the package version starts with ~ , it will be locked to the second major version

   // package.json
  "dependencies": {
  "md5": "~2.1.0"
  },

  Through npm i will install the latest version of md5 2.1.x (the latest version under version 2.1), which is not necessarily 2.1.0, but may also be 2.1.1

• The package version is * and will be locked to the latest version

   // package.json
  "dependencies": {
  "md5": "*"
  },

  Via npm i will install the latest version of md5

• If there is no prefix before the package version , it will be locked to the specified version.

   // package.json
  "dependencies": {
  "md5": "2.1.0"
  },

  Via npm i will install version 2.1.0 of md5

Solve the problem of slow npm speed

Because the npm warehouse is abroad, it will be slower for us to use the npm command in China to download the content of this foreign warehouse.

At this time, we can run the following command to switch the npm warehouse source to the domestic Taobao image (cnpm) source:

 npm config set registry https://registry.npmmirror.com

Use npm config get registry to view the current source:

When you use npm in the future, it will be automatically downloaded from the domestic Taobao mirror warehouse, and the speed will be very fast.

The previous source address of Taobao mirror was http://registry.npm.taobao.org, but now it has been changed to http://registry.npmmirror.com. View details

But it will inevitably be a bit troublesome for us to switch sources by modifying the npm configuration. We can install an nrm globally to help us quickly switch npm sources.

Use nrm to quickly switch npm sources

Install nrm globally:

 npm install -g nrm

Execute nrm ls to view switchable npm sources :

Use npm use to switch sources , such as switching to Taobao source: nrm use taobao

Use nrm test 源名to test the response time of the corresponding source:

You can see that the response speed of Taobao source is much faster than npm 's default source.

Chinese npm mirror: cnpm

cnpm is a complete npmjs.org mirror, which can be used instead of the official version

The synchronization frequency between cnpm and the official version is once every 10 minutes, cnpm official website

Download cnpm :

 npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm is the Taobao mirror . When we use the Taobao mirror source above, we just change the source of npm to the source of the Taobao mirror ( cnpm ) (this source actually refers to the address of the warehouse), and then use it through the npm command.

And here is to directly download the complete image of cnpm , and then you can use cnpm command instead of the npm command:

 cnpm installcnpm i axios -g

// ....

The instructions of cnpm are exactly the same as those of npm . Just use cnpm instead of npm when using it.

2. Use of yarn

yarn is a dependency management tool released by Facebook that is faster and more efficient than npm

Install:

 npm install -g yarn

Update yarn:

 yarn set version latest
yarn set version from sources

advantage

• super fast
  yarn caches each downloaded package so there is no need to download it again when using it again. Also utilizes parallel downloads to maximize resource utilization, so installations are faster

• Super safe <br/> Before executing the code, yarn will verify the integrity of each installation package through an algorithm

Yarn common instructions

• yarn init : Initialize the project and generate the package.json file. The generation steps are roughly the same as npm init

• yarn help : display command list

• yarn install : Download all resources recorded in package.json , which can be abbreviated as yarn

• yarn add 包名: download the specified package to the current directory

• yarn remove 包名: uninstall the specified package in the current directory

• yarn upgrade 包名: Update the specified package in the current directory. You can add @指定版本号after the package name to specify the version that needs to be updated.

yarn command suffix

• --dev : Specify dependencies in the development environment ( devDependencies ), abbreviated as -D

• --peer : Specify core dependencies ( peerDependencies )

• --optional : Specify optional dependencies ( optionalDependencies )

Conclusion

This article introduces npm and yarn , as well as nrm , cnpm , etc. derived from npm

Bloggers have been using a combination of npm + nrm to switch sources , because this not only ensures fast speed, but also allows for convenient source switching without having to download additional packages such as cnpm and yarn

Both npm and yarn have a lot of content. This article only explains the most commonly used content. If you want to know more, you can go to the corresponding official website to view it.