nodejs的包管理工具npm、yarn等使用指南

JyLie 2020-01-01 nodejsyarnnpmnrmnpxpnpm

名词解析：
- package => 代码模块，这里指 npm package

# 前言

本文主要讲述 nodejs 下的 node 版本管理工具和模块管理工具。

随着时间的推移，后续会总结常用工具，如：yarn、npm、npx、nrm、pnpm 等等在实践过程中碰过的问题。

# nodejs 的包管理工具

npm(node package manager)简单的说是一个面向 nodejs 的包管理工具。其包的结构使您能够轻松跟踪依赖项和版本，使用 npm 可以轻松发布包、下载包。

npm 由三个独立的部分组成，

托管 package 的网站，用于查找、发布和配置 package。
- npm: https://www.npmjs.com/
- yarn: https://yarnpkg.com/
注册表（registry）。储存 package 详细信息的数据库
cli(开发者操作使用的工具)

nodejs 默认内置 npm，只需要按照好 nodejs 则可正常使用 npm。

在 npm@v5.2.0 开始引入了 npx，npx 是 npm 的一个包执行器，npx 提高从 npm 注册表使用软件包的体验。

另外 nodejs 常用的包管理工具还有 yarn、pnpm

# Install

# Install yarn

在 window 端 yarn 版本通过下载软件安装，下载地址

也可以通过 cli 下载 yarn，可查看教程 https://yarn.bootcss.com/docs/install#mac-rc

# window
npm install --global yarn

# Ubuntu/Debain
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ rc main" | sudo tee /etc/apt/sources.list.d/yarn.list

# CentOS/MacOs
curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --rc

1
2
3
4
5
6
7
8
9

# Install pnpm

pnpm 详细安装教程请前往官网https://yarn.bootcss.com/docs/install

通过 npm 安装

npm install -g pnpm@next

通过脚本安装

# POSIX 类系统
curl -fsSL https://get.pnpm.io/install.sh | PNPM_VERSION=7.0.0-beta.2 sh -

# 如果没有安装 curl，可以使用 wget：
wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION=7.0.0-beta.2 sh -

# 在 Windows 系统上（PowerShell
$env:PNPM_VERSION='7.0.0-beta.2' ; iwr https://get.pnpm.io/install.ps1 -useb | iex

1
2
3
4
5
6
7
8

# Config

# Config path

npm、pnpm、yarn等安装完毕后，默认路径配置都在系统盘，因此需要自己手动修改包的安装路径位置。

# npm start
npm help npm
npm help install # 打开本地npm文档(或npm install 文档)
npm [command] -h # 展示command的用法
npm -l # 展示所有command的用法
npm adduser   # 登录or注册
npm config ls -l # 查询所有npm相关的配置，调用npm config set进行更改或覆盖
npm config set prefix "D:\SoftwareStore\node_global" # 配置npm全局安装路径，添加Path  '%NODE%\npm-global-modules'
npm config set cache "D:\SoftwareStore\node_cache" # 配置npm缓存路径
npm config set registry "https://registry.npm.taobao.org/" # 修改npm镜像(https://registry.npmjs.org/)(可以安装cnpm后修改cnpm的镜像)
# 配置成功后再次调用 npm config ls 查看
# npm end

# yarn start
npm install -g yarn # 全局安装yarn, 执行yarn help和yarn help [command]学习使用
yarn --version # 检测yarn安装版本 1.22.x，在使用yarn init之前执行yarn set version berry, 版本就在此文件夹下变成2.x.x
yarn config list # 查看yarn相关配置
yarn global bin # 查看yarn全局bin位置
yarn global dir # 查看yarn全局安装位置
yarn cache dir # 查看yarn全局缓存位置
yarn config set prefix "D:\SoftwareStore\node_global" # 配置yarn全局bin路径(D:\nodejs\Yarn\Data\global\bin) 添加Path '%NODE%\Yarn\Data\global\bin'
yarn config set global-folder "D:\SoftwareStore\yarn_global" # 配置yarn全局安装路径
yarn config set link-folder "D:\SoftwareStore\yarn_link" # 配置yarn全局link路径
yarn config set cache-folder "D:\SoftwareStore\yarn_cache" # 配置yarn全局缓存路径
yarn config set registry "https://registry.npm.taobao.org/" # 修改yarn镜像(https://registry.yarnpkg.com)
# yarn end

# pnpm start
npm install -g pnpm # 全局安装pnpm
pnpm --version # pnpm版本
#pnpm 下载成功后， pnpm setup 会设置包默认下载目录，接着需要自己手动修改目录路径 
pnpm setup 
pnpm config set store-dir "D:\SoftwareStore\pnpm_store" # pnpm全局仓库路径(类似 .git 仓库)
pnpm config set pnpm-prefix "D:\SoftwareStore\pnpm_prefix" # pnpm全局安装路径，pnpm@v5及一下使用
pnpm config set global-dir "D:\SoftwareStore\pnpm_prefix" # pnpm全局安装路径，pnpm@v6及以上使用
pnpm config set global-bin-dir "D:\SoftwareStore\node_global" # pnpm全局bin路径
pnpm config set state-dir "D:\SoftwareStore\pnpm_state-dir" # pnpm创建pnpm-state.json文件的目录
pnpm config set cache-dir "D:\SoftwareStore\pnpm_cache" # pnpm全局缓存路径
# pnpm end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

一番操作猛如虎，最总效果如下

# .yarnrc
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

registry "https://registry.npm.taobao.org/"
cache-folder "D:\\SoftwareStore\\yarn_cache"
global-folder "D:\\SoftwareStore\\yarn_global"
lastUpdateCheck 1665825962321
link-folder "D:\\SoftwareStore\\yarn_link"
prefix "D:\\SoftwareStore\\node_global"

1
2
3
4
5
6
7
8
9
10

# .npmrc
# npm
registry=https://registry.npm.taobao.org/
cache=D:\SoftwareStore\node_cache
prefix=D:\SoftwareStore\node_global
# 
# pnpm start
store-dir=D:\SoftwareStore\pnpm_store
pnpm-prefix=D:\SoftwareStore\pnpm_prefix
global-dir=D:\SoftwareStore\pnpm_prefix
global-bin-dir=D:\SoftwareStore\node_global
cache-dir=D:\SoftwareStore\pnpm_cache
state-dir=D:\SoftwareStore\pnpm_state-dir
# pnpm end

# git
strict-peer-dependencies=false
auto-install-peers=true

electron_mirror=https://npm.taobao.org/mirrors/electron/ # electron 二进制包镜像
ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/ # electron 二进制包镜像
puppeteer_download_host=https://npm.taobao.org/mirrors # puppeteer chrome包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Usage

# Usage Cli

nodejs 模块包中有可执行的 cli 工具。cli 工具包的运行方式有 2 钟：

通过全局安装工具包，系统自动生成可直接运行的快捷方式。

# 全局安装
npm install -g <cli_package>
pnpm add -g <cli_package>
yarn global add <cli_package>

# 全局cli可直接执行
<cli_package>

1
2
3
4
5
6
7

通过局部安装工具包，需要使用 npm 执行包运行，如 yarn、npx。

# 局部安装
npm install <cli_package>
pnpm add <cli_package>
yarn add <cli_package>

# 局部运行cli
npm run <cli_package>
npx <cli_package>
pnpm <cli_package>
yarn <cli_package>

1
2
3
4
5
6
7
8
9
10

# 安装包

全局安装

全局安装的默认地址

# npm
npm i -g <packageName>

1
2

局部安装

# npm
npm i --save  <packageName>

1
2

根据参数选择安装模式：
- npm 添加-g ，yarn 添加 global ，为全局安装
- 添加 -D 或 --save-dev 则安装为工具包，该包不参加打包
- 添加 -S 或 --save 则安装为依赖包，该包参加打包工具打包

# npm、pnpm一样
npm install <packageName>
npm i <packageName>
npm i -g <packageName>

npm i -D <packageName>
npm i --save-dev <packageName>

npm i -S <packageName>
npm i --save <packageName>

#yarn
yarn global add <packageName>
yarn add <packageName>

yarn add -D <packageName>
yarn add --save-dev <packageName>

yarn add -S <packageName>
yarn add --save <packageName>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 如果出现以下错误： npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解决办法为：npm config set proxy null

# 初始化库步骤

# npm
npm init -y
npm install webpack --save-dev

# yarn
yarn init -y
yarn add webpack --save-dev

1
2
3
4
5
6
7

# 查看模块

全局安装的所有模块

# npm
npm list -g
pnpm list --global

1
2
3

当前文件夹安装的所有模块

# npm
npm list
pnpm list
yarn list --flat

1
2
3
4

查看指定模块

# npm
npm list <packageName>
pnpm list <packageName>
yarn list <packageName>

1
2
3
4

# npm 添加用户

资源库中注册用户（使用邮箱注册）

# npm
npm adduser

1
2

# 发布模块

# npm
npm publish --registry=https://registry.npmjs.org/

1
2

# 创建文件

touch

# 更新模块

npm 更新

# npm
npm update <packageName>

1
2

yarn 更新

下载 npm-check-updates
yarn upgrade-interactive --latest（推荐）
yarn upgrade package@version

// 先下载
yarn global add npm-check-updates
// 更新包（yarn.lock和package.json同步更新）
ncu --upgrade --upgradeAll && yarn upgrade

yarn upgrade-interactive --latest
// 需要手动选择升级的依赖包，按空格键选择，a 键切换所有，i 键反选选择

yarn upgrade package@version
// yarn.lock和package.json都会更新，但是会进行版本锁定 "echarts": "4.2.0-rc.2"

1
2
3
4
5
6
7
8
9
10

pnpm 更新

# 深度更新最多100个子目录的所有包
pnpm --recursive update

# 更新typescript到每个包的最新版本
pnpm --recursive update <packageName>

1
2
3
4
5

# 卸载安装

# npm
npm uninstall <packageName>

# yarn
yarn remove <packageName>

# pnpm
pnpm remove <packageName>

1
2
3
4
5
6
7
8

# 搜索模块

这个命令会打开一个全屏的终端界面，你可以在这里搜索和安装 npm 注册表中的包。

# npm
npm search <packageName>

# yarn
yarn search <packageName>

1
2
3
4
5

# 配置项

注意：如果修改了全局包文件夹目录位置(如修改后为 path_gloabl[D:\npm\node_global])，则需要在电脑环境变量 Path 上添加path_gloabl，

当使用 npm|yarn set config xxx xxx 后，磁盘的用户文件夹下会生成一个.npmrc|.yarnrc 的文件，以下操作或者可在文件夹：C:\Users<Administrator> 上修改文件配置.npmrc

查看总配置列表

# npm
npm config ls
npm config list

# yarn
yarn config list

1
2
3
4
5
6

设置配置代理

用于设置代理协议，如：socks\http 等。

因为有些包是存在 http,有些在 socks（基本默认）

因此需要在特定情况下设置代理才能顺利下载包

# npm
# 有时候再设置代理后无法下载包，则需要清空代理
npm config set proxy null

# 基本代理设置
npm config set proxy http://[ip]:[port]
npm config set https-proxy http://[ip]:[port]

# 需要认证代理设置
npm config set proxy http://username:password@server:port
npm config set https-proxy http://username:pawword@server:port

# 清除代理设置
npm config delete proxy
npm config delete https-proxy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

设置本地缓存文件夹和全局文件夹

在开发过程中，随着时间的推移，开发者可能会按照了很多全局包。因为全部包的默认目录一般在系统盘，因此可以跳转默认目录，也方便以后的管理。

缓存文件默认地址：C:\Users\Administrator\AppData\Roaming\npm-cache

全局包文件默认地址：C:\Users\Administrator\AppData\Roaming\npm\node_modules

npm config 允许使用 set\get 来设置或查看信息。如下：

# npm
# 设置缓存
npm config set cache "D:\npm\node_cache"
# 设置全局
npm config set prefix "D:\npm\node_global"
# 设置镜像源
npm config set registry "https://registry.npm.taobao.org"
# 查看缓存
npm config get cache
# 查看全局
npm config get prefix
# 查看镜像源
npm config get registry

# yarn
# 设置缓存
yarn config set cache "D:\npm\node_cache"
# 设置全局
yarn config set prefix "D:\npm\node_global"
# 设置镜像源
yarn config set registry "https://registry.npm.taobao.org"
# 查看缓存
yarn config get cache
# 查看全局
yarn config get prefix
# 查看镜像源
yarn config get registry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 清除缓存

有时候缓存包会与安装包存在冲突，这种情况需要清除缓存处理

# npm
npm cache clean # npm@v5
npm cache verify # npm@v6

1
2
3

# 镜像设置

# npm
# 查看镜像：
npm config get registry
yarn config get registry

# 设置永久镜像，设置会被写入到.npmrc|.yarnrc文件：
npm config set registry http://registry.npm.taobao.org/
npm config set registry https://registry.npmjs.org/
yarn config set registry https://registry.npm.taobao.org/

# 设置临时镜像，只在本次命令使用
npm --registry https://registry.npm.taobao.org install <packageName>
yarn --registry https://registry.npm.taobao.org add <packageName>

1
2
3
4
5
6
7
8
9
10
11
12
13

常用镜像源地址有：

npm --- https://registry.npmjs.org/

cnpm --- https://r.cnpmjs.org/

taobao --- https://registry.npm.taobao.org/

nj --- https://registry.nodejitsu.com/

rednpm --- https://registry.mirror.cqupt.edu.cn/

npmMirror --- https://skimdb.npmjs.com/registry/

deunpm --- http://registry.enpmjs.org/

切换镜像源地址通过上述方式进行设置与查看，也可以直接使用nrm 包来设置，下面会讲到。

使用淘宝源时或者尝试 cnpm

安装 cnpm 包

# npm
npm install -g cnpm --registry=https://registry.npm.taobao.org/
cnpm install <packageName>
npm install <github_link#branch_name> # 下载github指定分支的库

1
2
3
4

当使用 cnpm -v/cnpm -version 查看版本时提示“cnpm 命令提示不是内部或外部命令”

原因：本地系统没有添加 npm 模块的环境变量，所以不能识别命令。

解决：将将全局安装目录 D:\npm\node_global 添加到环境变量

# FAQ

# 全局包运行时报错： SecurityError: (😃 []，PSSecurityException

+ CategoryInfo    : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

1
2

原因：Windows 下 PowerShell 默认的权限级别是 Restricted，不允许执行 PS 脚本（即.ps1 文件）。如果在 Restricted 权限级别下运行，会得到上述错误
解决：Set-ExecutionPolicy RemoteSigned -Scope process
科普 window 执行策略：

#更新执行策略
Set-ExecutionPolicy <policy-name>

#policy-name可能的值
Unrestricted、RemoteSigned、AllSigned、Restricted、Default、Bypass、Undefined

#将ExecutionPolicy改为Unrestricted，可以运行未签名的脚本
Set-ExecutionPolicy Unrestricted

#查询详细策略
get-help about_Execution_Policise

1
2
3
4
5
6
7
8
9
10
11
12

# node-sass 安装错误

首先要排除 node-sass 版本是否与你安装的 py2、py3 有冲突，如果没冲突则做下面操作。

排除 py 问题，一般都是国内网络不稳定的问题了。

那么我们有几种常用方法：

设置特定包的淘宝源：

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm config set registry=https://registry.npm.taobao.org

1
2
3
4

上述操作可以在使用 npm install 安装 node-sass、electron 和 phantomjs 时都能自动从淘宝源上下载。

使用 cnpm 淘宝源下载

npm install -g cnpm
cnpm install

1
2

使用 VPN

npm config set proxy (http://127.0.0.1:1080)此处是 VPN 的代理地址
npm i node-sass

#下载完成后删除 http 代理
npm config delete proxy

1
2
3
4
5

# npm ERR! code EUNSUPPORTEDPROTOCOL. Unsupported URL Type

原因: npm 版本过低
解决：

# 查看 npm 版本
npm -v
# 更新版本
npm install -g npm

1
2
3
4

# nrm

nrm(npm registry manager )是 npm 的镜像源管理工具，有时候国外资源太慢，那么我们可以用这个来切换镜像源。

# install nrm

npm install -g nrm

# Usage nrm

# 查看可使用镜像源
#   npm -------- https://registry.npmjs.org/
#   yarn ------- https://registry.yarnpkg.com/
#   cnpm ------- http://r.cnpmjs.org/
# * taobao ----- https://registry.npm.taobao.org/
#   nj --------- https://registry.nodejitsu.com/
#   npmMirror -- https://skimdb.npmjs.com/registry/
#   edunpm ----- http://registry.enpmjs.org/
nrm ls
# 切换镜像源
nrm use <url>

1
2
3
4
5
6
7
8
9
10
11

# 参考链接

淘宝源
Yarn 文档
npm 文档