Home > Web Front-end > JS Tutorial > body text

Learn about two powerful Node package managers: npm and yarn

青灯夜游
Release: 2022-08-25 11:00:50
forward
1890 people have browsed it

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!

Learn about two powerful Node package managers: npm and yarn

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 of npm’s resource library (https: //www.npmjs.com/) In foreign countries, the speed of using it to download resources is relatively slow, so yarnthesethird-partynode package managers# appeared. ##And the domestic Taobao mirror (cnpm) that is updated synchronously with the npm warehouse

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

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

1. Use of npm

What is npm

Use## Before #npm

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

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

As of March 17, 2020,
npm

provided 1.3 million packages to approximately 12 million developers who These software packages are downloaded 75 billion times every month If you want to download and use the resources in the

npm

warehouse, you can use the npm command ( npm, such as npm i axios download axios) or use other third-party instructions (third-party Node package manager ), such as yarn, etc.

Official statement:
npm

is the package management and distribution tool for NodeJS

Package management

is reflected in that it is a warehouse of NodeJS, which stores and manages various software packages of NodeJS

Distribution tool

is reflected in using the npm command to download the package in the npm warehouse

in our configuration
In NodeJS

environment, npm command module is installed together with NodeJS. We can run npm -v through the terminal to view the installed version:

Learn about two powerful Node package managers: npm and yarnBut if the

npm

version installed by default is too old, you can also manually install and update npm:

npm i npm@latest -g
Copy after login

@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, install ourselves? This is actually easy to understand.

npm’s command module

is also stored as a package in the npm warehouse, and the name of this package is npm, see npm Address: https://www.npmjs.com/package/npm

Learn about two powerful Node package managers: npm and yarnSo

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

But in fact, the word
npm

refers to the npm command Module also refers to the npmNodeJSopen source warehouse itself, so we have it in npm
(this npm represents NodeJS Open source warehouse) Download npm (This npm represents the package named npm, this package is the instruction module of npm)

npm common instructions

npm

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

  • npm init

    : Generate package.json

    Learn about two powerful Node package managers: npm and yarn

  • ##npm install
  • :

    Download all resources recorded in package.json

  • npm install package Name
  • :

    Download specified package to the current directory

  • npm uninstall Package name
  • :

    Uninstallcurrent The package specified in the directory

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

  • npm outdated package name: 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 package nameGetdetailed information of 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 Abbreviated as ls)

  • npm list package name

    :View specified package installed in the current directory The version number (list can be abbreviated as ls)

  • A few additions:

    install
  1. can be abbreviated to

    i, for example: npm install axios can be abbreviated to npm i axios

  2. uninstall
  3. can be abbreviated as

    un

    Add
  4. @ after the package name The
  5. symbol can specify the version of the package, such as:

    npm i md5@1 Download version 1 of md5, npm i md5@latest means download the latest version of md5

npm

Command suffix

  • -g

    : Specify Global environment

    npm
    The default command is to operate in the current directory, adding

    -g is specified in the global environment Operation, install the latest version of npm globally as mentioned above: npm i npm@latest -g, so that npm## can be used in any directory

    #--save
  • can be abbreviated as
  • -s

    : Specify the dependencies under production environment ( Recorded in dependencies) After the npm5 version, the default is

    --save
    , if installed in both the production environment and the development environment Axios needed:

    npm i axios -s

    ##--save-dev
    can be abbreviated as
  • -D
  • : Specify the dependencies under development environment (recorded in devDependencies) If installed in the production environment, it is not required Babel used (only used in development environment): npm i babel -D

    --save-prod
    can be abbreviated as
  • -P
  • : the 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

Dependencies Package management

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

devDependencies

In addition, there are actually: peerDependencies

,

    optionalDependencies
  • bundledDependencies / bundleDependencies
  • , including several dependencies, are recorded in
  • package.json:

We mentioned these types of dependencies when we talked about the npm directive suffix

above. Let’s talk about what they represent in detail:

Learn about two powerful Node package managers: npm and yarn

dependenciesanddevDependencies

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

peerDependencies

You can view the article by the boss: Understanding 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, and optionalDependencies

will overwrite the dependency package with the same name in
dependencies

, so don’t write ##bundledDependencies / bundleDependencies

Packaging dependencies, bundledDependencies is an array object containing the name of the dependent package. When publishing, the packages in this object will be packaged into In the final release package, the packages in the array must first be declared in devDependencies or

dependencies
, otherwise the package will report an error

package.json中需要注意的包版本问题

通过npm下载的所有包的版本信息都会记录在package.json

在运行npm i时就会根据package.json中记录的包信息进行下载,它的下载规则如下:

  • 包版本以^开头时(默认情况),会锁定大版本

       // package.json
      "dependencies": {
        "md5": "^2.1.0" // ^开头的
      },
    Copy after login

    通过npm i将会安装md5 2.x.x的最新版本(2大版本下的最新版本),并不一定是2.1.0,还可能是2.3.0

  • 包版本以~开头时,会锁定到第二个大版本

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

    通过npm i将会安装md5 2.1.x的最新版本(2.1版本下的最新版本),并不一定是2.1.0,还可能是2.1.1

  • 包版本为*,会锁定到最新版本

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

    通过npm i将会安装md5的最新版本

  • 包版本前不带前缀,会锁定到指定版本

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

    通过npm i将会安装md5的2.1.0版本

解决npm速度慢的问题

因为npm仓库在国外,我们在国内使用npm指令下载这个国外仓库的内容速度会比较慢

这时我们就可以运行以下指令将npm的仓库源切换到国内的淘宝镜像(cnpm) 的源:

npm config set registry https://registry.npmmirror.com
Copy after login

使用npm config get registry查看当前源:

Learn about two powerful Node package managers: npm and yarn

往后再使用npm时就会自动从国内的淘宝镜像仓库下载了,速度就会很快

淘宝镜像之前的源地址为http://registry.npm.taobao.org,现在更改为了http://registry.npmmirror.com,查看详情

但我们这样通过修改npm的配置进行源的切换难免会有点麻烦,我们可以全局安装一个nrm来帮助我们快速的切换npm

使用nrm快速切换npm源

全局安装nrm

npm install -g nrm
Copy after login

执行nrm ls查看可切换的npm源

Learn about two powerful Node package managers: npm and yarn

使用npm use 切换源,如切换到淘宝源:nrm use taobao

Learn about two powerful Node package managers: npm and yarn

使用nrm test 源名测试相应源的响应时间:

Learn about two powerful Node package managers: npm and yarn

可以看到淘宝源的响应速度要比npm的默认源快很多

中国npm镜像:cnpm

cnpm是一个完整的npmjs.org镜像,可以用它代替官方版本

cnpm与官方版本的同步频率为10分钟一次,cnpm官网

下载cnpm

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

cnpm就是淘宝镜像,上面我们使用淘宝镜像只是将npm的源更改为淘宝镜像(cnpm)的源(这个源其实就是指仓库的地址),之后还是通过npm指令进行使用

而这里是直接下载cnpm这个完整镜像,之后就可以使用cnpm指令而不是npm指令:

cnpm installcnpm i axios -g

// ....
Copy after login

cnpm的指令与npm的指令完全相同,使用时直接使用cnpm代替npm就行

二、yarn的使用

yarn是Facebook发布的一款依赖管理工具,它比npm更快、更高效

安装:

npm install -g yarn
Copy after login

更新yarn:

yarn set version latest
yarn set version from sources
Copy after login

优点

  • 速度超快
    yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快

  • Super safe
    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 package .json file, the generation steps are roughly the same as npm init

    Learn about two powerful Node package managers: npm and yarn

  • ##yarn help

    : Display command list

  • yarn install

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

  • yarn add package name

    : Download the specified package to the current directory

  • yarn remove package name

    : UninstallThe package specified in the current directory

  • yarn upgrade package name

    :Update Specified package in the current directory, you can add @specified version number after the package name to specify the version to be updated

yarn command suffix

    ##--dev
  • : Specify the dependencies under 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## derived from npm #, cnpm, etc. bloggers have always used the combination of npm nrm switching source , because this not only ensures fast speed and convenient source switching, but also There is no need to download additional packages like

cnpm

, yarn. npm and

yarn

have more 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 For more node-related knowledge, please visit: nodejs tutorial!

The above is the detailed content of Learn about two powerful Node package managers: npm and yarn. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template