前端包管理工具之npm、cnpm、yarn

前端包管理工具之npm、cnpm、yarn

npm

npm是node.js内置的依赖管理器，只要配置好node，可以直接使用npm

cnpm

npm的服务器在国外，所以日常在使用npm去下载一些依赖时，经常会遇到网络原因，下载失败。于是淘宝团队做了国内镜像。淘宝镜像与官方同步频率目前为10分钟一次以保证尽量与官方服务同步。

cnpm的命令使用方法和npm相似，cnpm的命令则为cnpm install

# 全局安装cnpm
npm install cnpm -g 

# 全局安装cnpm，使用淘宝镜像地址
npm install cnpm -g --registry=https://registry.npm.taobao.org

# 配置npm的镜像下载地址
npm config set registry https://registry.npm.taobao.org
1
2
3
4
5
6
7
8

Yarn

概述

Yarn 是一个软件包管理器，还可以作为项目管理工具。Yarn是基于Npm的不足之处做出了全新的改版升级

官网： https://www.yarnpkg.cn/

特点：

快速: Yarn缓存了每个下载过的包，再次使用时无需重复下载。同时它是并行的，因此安装速度更快。

安全: 在执行代码之前，Yarn会通过算法校验每个安装包的完整性。

可靠: 使用详细、简洁的锁文件格式和明确的安装算法，使Yarn能够在不同系统上保证无差异的工作。
1
2
3
4
5

安装

yarn有很多种安装方式，推荐使用Npm安装

全局安装Yarn的最新版本

npm i -g yarn

added 1 package in 2s
npm notice
npm notice New minor version of npm available! 8.15.1 -> 8.16.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.16.0
npm notice Run npm install -g npm@8.16.0 to update!
npm notice
1
2
3
4
5
6
7
8

验证

D:\>yarn init
错误: 找不到或无法加载主类 init
1
2

npm安装的yarn指向了jdk自带的yarn

D:\>yarn -version
java version "1.8.0_202"
Java(TM) SE Runtime Environment (build 1.8.0_202-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.202-b08, mixed mode)
1
2
3
4

使用yarnpkg关键字代替yarn关键字,它俩是等同的。手动下载yarn安装包，在系统环境变量中Path 里，yarn的环境变量置于jdk的环境变量之前

D:\>yarnpkg -version
1.22.19
1
2

包管理工具的基本使用

在常见的三大包管理工具中，推荐使用yarn

初始化项目

D:\>cd demo

D:\demo>yarnpkg init
yarn init v1.22.19
question name (demo):
question version (1.0.0):
question description: this is a test.
question entry point (index.js):
question repository url:
question author: CJ
question license (MIT):
question private:
success Saved package.json
Done in 55.22s.
1
2
3
4
5
6
7
8
9
10
11
12
13
14

初始化完成后，初始化的文件夹中，会自动生成一个 package.json 文件，文件中包含初始化时填写的默认信息

{
  "name": "demo",
  "version": "1.0.0",
  "description": "this is a test.",
  "main": "index.js",
  "author": "CJ",
  "license": "MIT"
}
1
2
3
4
5
6
7
8

package.json用于管理包依赖关系，它是描述软件包信息的文件，也叫做清单。其他的如添加、删除、更新等命令用于管理package.json和yarn.lock。

添加依赖

如果不写版本号，默认安装最新版本。也可以安装指定版本。安装插件依赖后，此操作将自动在 package.json中添加对应的依赖，同时更新yarn.lock文件的版本信息。

yarn add vue-cli

# 使用插件依赖名@版本号
yarn add vue-cli@x.x.x
1
2
3
4

添加不同的参数，将依赖添加到不同的依赖类型分组下

yarn add --dev 添加到 devDependencies

yarn add --peer 添加到 peerDependencies

yarn add --optional 添加到 optionalDependencies
1
2
3
4
5

执行 yarn add vue-cli，出现 success信息，并提示具体安包的数量，说明依赖安装成功

D:\demo>yarnpkg add vue-cli
yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
warning vue-cli > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning vue-cli > coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
warning vue-cli > request > har-validator@5.1.5: this library is no longer supported
warning vue-cli > request > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 206 new dependencies.
info Direct dependencies
└─ vue-cli@2.9.6
info All dependencies
├─ ajv@6.12.6
├─ ansi-escapes@3.2.0
├─ ansi-regex@4.1.1
├─ ansi-styles@3.2.1
├─ argparse@1.0.10
├─ array-differ@1.0.0
├─ array-union@1.0.2
├─ array-uniq@1.0.3
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

package.json文件中多出了预想的依赖信息，并且项目目录中多出了node_modules文件夹，所有的依赖相关文件都被安装在了这个文件夹中

{
  "name": "demo",
  "version": "1.0.0",
  "description": "this is a test.",
  "main": "index.js",
  "author": "CJ",
  "license": "MIT",
  "dependencies": {
    "vue-cli": "^2.9.6"
  }
}
1
2
3
4
5
6
7
8
9
10
11

更新

yarn upgrade是按指定的版本区间升级，使用 --latest参数升级到最新版

yarn upgrade webpack --latest
1

如果有多个依赖，想同时升级到最新版本

yarn upgrade-interactive
1

删除依赖

从当前项目中删除依赖项

yarn remove vue-cli
1

一次从所有工作空间中删除一个依赖项

yarn remove vue-cli --all
1

删除所有以开头的依赖项eslint-

yarn remove 'eslint-*'
1

删除@babel范围内的所有依赖项

yarn remove '@babel/*'
1

删除所有匹配的依赖项react-dom或react-helmet

yarn remove 'react-{dom,helmet}'
1

常用命令

设置淘宝镜像

当使用yarn时，速度很慢，则可以使用修改下载源的方式提升下载速度。

查看yarn源的当前地址

D:\>yarnpkg config get registry
https://registry.yarnpkg.com
1
2

设置淘宝镜像

yarn config set registry https://registry.npm.taobao.org/
1

查看yarn版本信息

D:\>yarn -version
1.22.19

D:\>yarn -v
1.22.19
1
2
3
4
5

初始化项目

初始化一个项目并生成 package.json文件

 yarn init
1

依赖管理

添加一个或者多个依赖

 yarn add <package>
1

更新已经安装的依赖

 yarn upgrade <package>
1

删除已经安装的依赖

 yarn remove <package>
1

具体某一个依赖的信息

 yarn info vue
1

全家添加依赖

 yarn global add webpack
1

管理用户缓存依赖

显示出当前缓存目录

yarn cache dir
1

展示所有已缓存的依赖项信息

yarn cache list
1

对本地缓存的依赖进行强制清除

yarn cache clean
1

查看和设置依赖的一些配置信息

D:\>yarn config list
yarn config v1.22.19
warning package.json: No license field
info yarn config
{
  'version-tag-prefix': 'v',
  'version-git-tag': true,
  'version-commit-hooks': true,
  'version-git-sign': false,
  'version-git-message': 'v%s',
  'init-version': '1.0.0',
  'init-license': 'MIT',
  'save-prefix': '^',
  'bin-links': true,
  'ignore-scripts': false,
  'ignore-optional': false,
  registry: 'https://registry.yarnpkg.com',
  'strict-ssl': true,
  'user-agent': 'yarn/1.22.19 npm/? node/v16.14.0 win32 x64',
  lastUpdateCheck: 1660116029675
}
info npm config
{
  prefix: 'D:\\Development\\nodejs\\node_global',
  registry: 'https://registry.npm.taobao.org/',
  cache: 'D:\\Development\\nodejs\\node_cache'
}
Done in 0.08s.
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