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

• 前端包管理工具之npm、cnpm、yarn
• • npm
  • cnpm
  • Yarn
  • • 概述
    • 安装
    • 验证
• 包管理工具的基本使用
• • 初始化项目
  • 添加依赖
  • 更新
  • 删除依赖
• 常用命令
• • 设置淘宝镜像
  • 查看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

Yarn

概述

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

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

特点：

快速: Yarn缓存了每个下载过的包，再次使用时无需重复下载。同时它是并行的，因此安装速度更快。安全: 在执行代码之前，Yarn会通过算法校验每个安装包的完整性。可靠: 使用详细、简洁的锁文件格式和明确的安装算法，使Yarn能够在不同系统上保证无差异的工作。

安装

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

全局安装Yarn的最新版本

npm i -g yarnadded 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

验证

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

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)

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

D:\>yarnpkg -version
1.22.19

包管理工具的基本使用

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

初始化项目

D:\>cd demoD:\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.

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

{"name": "demo","version": "1.0.0","description": "this is a test.","main": "index.js","author": "CJ","license": "MIT"
}

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

添加依赖

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

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

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

yarn add --dev 添加到 devDependenciesyarn add --peer 添加到 peerDependenciesyarn add --optional 添加到 optionalDependencies

执行 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

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"}
}

更新

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

yarn upgrade webpack --latest

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

yarn upgrade-interactive

删除依赖

从当前项目中删除依赖项

yarn remove vue-cli

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

yarn remove vue-cli --all

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

yarn remove 'eslint-*'

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

yarn remove '@babel/*'

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

yarn remove 'react-{dom,helmet}'

常用命令

设置淘宝镜像

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

查看yarn源的当前地址

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

设置淘宝镜像

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

查看yarn版本信息

D:\>yarn -version
1.22.19D:\>yarn -v
1.22.19

初始化项目

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

 yarn init

依赖管理

添加一个或者多个依赖

 yarn add 

更新已经安装的依赖

 yarn upgrade 

删除已经安装的依赖

 yarn remove 

具体某一个依赖的信息

 yarn info vue

全家添加依赖

 yarn global add webpack

管理用户缓存依赖

显示出当前缓存目录

yarn cache dir

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

yarn cache list

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

yarn cache clean

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

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.