全面解析 Node.js 的包管理：npm、yarn 和 pnpm 的使用

[yanyue404]

npm

了解更多 node Packages，https://nodejs.org/api/packages.html

npm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。

我们只要一行命令，就能安装需要的 node 模块 。

$ npm install <packageName>

1. 基本使用

（1）打开 cmd，切换到项目所在文件夹

（2）在 cmd 中输入命令: npm init，会生成一个名为 package.json 的配置文件（省略设置配置信息 npm init -y）

（3）使用npm install 包名 来下载我们想要在在项目中使用的包 （这个包会下载到，当前项目下 node_modules 文件夹 中）

（4）指定版本号下载

npm install webpack@3.10.0 -g

（5）开发依赖及运行依赖

配置项	说明
devDependencies	开发依赖，上线不需要
dependencies	项目运行的依赖，上线依旧要使用
--save / -S	配置信息写入dependencies
--save–dev / -D	配置信息写入devDependencies
npm i jquery -S	下载 jquery 并保存到 package.json 的开发依赖中
npm config get cache	查看全局的 npm 下载 taz 压缩包缓存路径
npm cache ls vue	查看全局的 npm 下载缓存的 vue 版本信息

（6） 移除模块

删除全局模块

npm uninstall -g <package>

删除本地模块

npm uninstall 模块

npm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息
npm uninstall 模块 --save 删除模块，同时删除模块留在package.json中dependencies下的对应信息
npm uninstall 模块 --save-dev 删除模块，同时删除模块留在package.json中devDependencies下的对应信息

2. npm 常用命令

命令说明	header 2
npm init -y	省略项目初始化需要填写的信息
npm config list	查看自己 npm 的配置信息
script 执行命令	npm run 去执行这个命令。
npm list -g --depth 0	查看已全局安装的依赖
npm prefix -g	查看全局 node 模块的安装路径
npm home react	快速打开 react 的官网
npm repo react	快速打开 react 的代码仓库
npm view react versions	查看 react 的 npm 所有历史版本号

3. 切换镜像

使用淘宝源

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

还原 npm 官方仓库

npm config set registry https://registry.npmjs.org/

4. 版本

官方计算版本范围

range	含义	例
^2.2.1	指定的 MAJOR 版本号下, 所有更新的版本	匹配 >= 2.2.1 并且< 2.3.0; 不匹配 1.0.3, 3.0.1
^0.2.3	指定的 MAJOR 版本号下, 所有更新的版本	匹配 >= 0.2.3 并且 < 0.3.0
^0.0.3	指定的 MAJOR 版本号下, 所有更新的版本	匹配 >= 0.0.3 并且 < 0.0.4
~2.2.1	指定 MAJOR.MINOR 版本号下，所有更新的版本	匹配 2.2.3, 2.2.9 ; 不匹配 2.3.0, 2.4.5
>=2.1	版本号大于或等于 2.1.0	匹配 2.1.2, 3.1
<=2.2	版本号小于或等于 2.2	匹配 1.0.0, 2.2.1, 2.2.11
1.0.0 - 2.0.0	版本号从 1.0.0 (含) 到 2.0.0 (含)	匹配 1.0.0, 1.3.4, 2.0.0

注意：^ 指明的版本范围，只要不修改 [major, minor, patch] 三元组中，最左侧的第一个非0位，都是可以的。也就是说，要确定 ^版本包含的范围，先要找到 最左侧的第一个非0位 ，只有在这一位右侧的变动，才被包含在这个 ^ 指定的范围内。

官网还找到一个 npm命令行工具：semver，可以安装到全局：npm i -g semver ，之后，可以用这个工具来检查某个范围版本具体包含哪些:

semver -r ^0.12.0 0.12.0 0.13.0 0.13.1

# output
0.12.0

semver -r ^17.0.1 18.1.1 17.7.1

# output
17.7.1 

任意两条规则，通过 || 连接起来，则表示两条规则的并集:

如 ^2 >=2.3.1 || ^3 >3.2 可以匹配:

* `2.3.1`, `2,8.1`, `3.3.1`
* 但不匹配 `1.0.0`, `2.2.0`, `3.1.0`, `4.0.0`
PS: 除了这几种，还有如下更直观的表示版本号范围的写法:

• * 或 x 匹配所有主版本
• 1 或 1.x 匹配 主版本号为 1 的所有版本
• 1.2 或 1.2.x 匹配 版本号为 1.2 开头的所有版本

PS: 在常规仅包含数字的版本号之外，semver 还允许在 MAJOR.MINOR.PATCH 后追加 - 后跟点号分隔的标签，作为预发布版本标签 - Prerelese Tags，通常被视为不稳定、不建议生产使用的版本。例如：

• 1.0.0-alpha
• 1.0.0-beta.1
• 1.0.0-rc.3

上表中我们最常见的是 ^1.8.11 这种格式的 range, 因为我们在使用 npm install 安装包时，npm 默认安装当前最新版本，例如 1.8.11, 然后在所安装的版本号前加^号, 将 ^1.8.11 写入 package.json 依赖配置，意味着可以匹配 1.8.11 以上，2.0.0 以下的所有版本。

5. npm 发包

npm config list # 本地配置需修改为官方的仓库
npm set registry https://registry.npmjs.org/ # 还原为官方仓库
npm login # 登录
npm publish # 发布
npm unpublish --force #撤回已经发布的包(在 npm 包目录下)

npm config set registry https://registry.npmmirror.com # 切换回日常使用的淘宝镜像库

6. 代理配置

# 配置 npm 代理 
npm config set proxy=http://xxx:808
npm config set https-proxy=http://xxx:808

# 删除代理方法

npm config delete proxy
npm config delete https-proxy

7. 修复 npm WARN config global --global、--local 已弃用。使用 --location=global 代替警告

# 这个警告官方在npm 8.12.1中得到了修复，故可以升级安装npm
# 安装最新版
npm install -g npm@latest

# 安装指定版本
npm install -g npm@8.12.1

yarn

1、 下载地址

• https://yarn.bootcss.com/

2、配置淘宝镜像

yarn config set registry https://registry.npmmirror.com -g

3、中文介绍说明

• yarn cli 介绍

4、使用 yarn

• 开始一个新工程

yarn init

• 添加一个依赖

# dependencies
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

# devDependencies
yarn add redux-devtools-extension --dev

• 全局安装

yarn global add webapck@3.10.0

全局安装后仍然无法使用命令的话，需要添加环境变量配置

# 获取bin目录，复制粘贴到系统变量里面
yarn global bin

• 更新一个依赖

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

• 移除一个依赖

yarn remove [package]

• 查看 yarn 全局安装路径

yarn global bin

• 从全局移除一个依赖

yarn global remove @tarojs/cli

• 全局更新至最新的版本

yarn global add  @tarojs/cli@latest

• 查看全局安装的列表

yarn global list

5、node-sass 安装

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install # 首次安装所有依赖直接指向

set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ # 先 set ，后 install
npm install node-sass

或者新建 .npmrc 文件，内容为：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

最新更新

yarn add node-sass-install

当安装 node-sass-install 的时候，会依赖并下载 dart-sass，然后重命名为 node-sass：

{
  "dependencies": {
    "node-sass": "npm:dart-sass@latest"
  }
}

更新：使用 dart-sass代替 node-sass

yarn add sass-loader sass fibers  -D

webpack 配置更新

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
              sassOptions: {
                fiber: require("fibers"),
              },
            },
          },
        ],
      },
    ],
  },
};

参考链接

• 一秒钟解决安装 node-sass 慢的问题(yarn add node-sass-install)
• 安装 node-sass 的正确姿势
• webpack node-sass 改为 dart-sass
• https://github.com/webpack-contrib/sass-loader#examples
• npm WARN config global --global, --local are deprecated. Use --location=global i
  npm WARN config global --global、--local 已弃用。使用 --location=global i
• npm install 版本号^的坑
• npm 模块安装机制简介