安装并配置使用包管理工具-Yarn_yarn包管理工具

一、介绍与安装

1.1 介绍

Yarn是一款功能包管理工具，与npm(npm:Node.js 的包管理器 npm,是目前最流行的Node.js 的包管理器。)类似。有着FAST(快速的), RELIABLE( RELIABLE 可信赖的), AND SECURE DEPENDENCY MANAGEMENT(安全依赖关系管理)的特点。
Yarn官网

1.2 安装Node.js与npm

来自Yarn官网：Installation
It is recommended to install Yarn through the npm package manager, which comes bundled with Node.js when you install it on your system.
建议通过npm包管理器安装Yarn，当您在系统上安装它时，它与Node.js捆绑在一起。

Once you have npm installed you can run the following both to install and upgrade Yarn: npm install --global yarn
一旦安装了npm，就可以运行以下程序来安装和升级Yarn：npm install --global yarn

#所以，我们首先要下载安装Node.js，安装完成后，使用和Node.js一起捆绑安装的npm包管理器(npm是和Node.js一起安装的包管理工具)，运行npm install --global yarn 或者npm install --g yarn ，来安装Yarn。

1.2.1 多个Node.js与npm版本共存(推荐这种)

由于Node.js版本原因，可能会出现一些错误，如IDEA中Node.js环境下npm报错Error:0308010C:digital envelope routines:unsupported。而且不同的项目，所采用的Node.js的版本不同，重新卸载安装配置，太过繁琐。所以可以使用nvm来动态灵活管理Node.js的版本 。

注意：Win7系统不支持最新版本Node.js，目前我在另一部机器上测试，最高版本只能使用Node.js13.14.0。
Node.js is only supported on Windows 8.1,Windows server 2012 R2, or higher.

#nvm：管理Node.js版本的工具，可以管理多个Node.js版本以及其对应的npm。

#Node.js:一个基于 Chrome V8 引擎的 JavaScript 运行环境，是一个开源的、跨平台的 JavaScript 运行时环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

#npm:Node.js 的包管理器 npm,是目前最流行的Node.js 的包管理器。

#npm、Node.js、npm三者关系的总结：nvm管理Node.js的版本，npm管理Node.js的包。
1
2
3
4
5
6
7

注意：如果你之前已经单独在自己的机器上安装并使用过Node.js，必须先卸载这个已经安装好的版本，否则不仅无法纳入nvm的版本管理中，而且很可能会出现冲突问题。

推荐这种，先安装nvm(Node.js Version Manager,Node.js版本控制器),安装Node.js并动态管理Node.js 的版本。

可以参考我这篇文章 ：安装配置nvm-windows对Node.js与npm进行版本控制

1.2.2 只安装单个Node.js与npm

如果已经采用了 1.2.1 多个Node.js与npm版本共存(推荐这种) 中的内容，那么此节(1.2.2 只安装单个Node.js与npm)无需再看。

单个Node.js的完整安装配置过程，可以参考我这篇文章：IDEA中Node.js环境下npm报错Error:0308010C:digital envelope routines:unsupported中的二、安装配置，其中已经以图文的形式，详细的展示了这个安装与配置相关环境变量的过程。

根据自己机器的操作系统，来点击下载Node.js(建议下载LTS长期支持版，我这里安装的是v18.16.1):
Node.js官网下载1

Node.js官网 ，首页也可以点击下载。

单个Node.js的完整安装配置过程，可以参考我这篇文章：IDEA中Node.js环境下npm报错Error:0308010C:digital envelope routines:unsupported中的二、安装配置，其中已经以图文的形式，详细的展示了这个安装与配置相关环境变量的过程。
注意点：这里需要配置两个环境变量，即配置用户变量NODE_PATH和系统变量Path。(文章中也有)

//配置用户变量NODE_PATH
path是Node.js的安装路径

//系统变量Path
在系统变量Path中添加%NODE_PATH%，可以在何处，让系统可以识别并使用相关命令。
1
2
3
4
5

检测是否安装成功：

#检测path正常
path 或者 echo %path%

#检测Node.js
node -v

#检测npm
npm -v
1
2
3
4
5
6
7
8

配置npm：
在Node.js安装目录中新建node_global&node_cache文件夹

#node_global是npm的全局模块的路径
#node_cache是npm使用时的cache即缓存的配置路径。
1
2

在CMD中使用npm config 中的npm config set命令配置node_global和node_cache文件夹：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
1
2

在CMD中使用nmp config 中的npm config set命令配置镜像-regisry：

#npm config set registry 设置镜像站
npm config set registry=http://registry.npm.taobao.org
1
2

使用npm config get 和npm config list命令可以获取配置的信息。
以管理员身份运行CMD,输入npm info vue，即可查看刚刚配置的信息。

1.3 使用npm来安装Yarn

npm install --global yarn
或
npm install --g yarn
1
2
3

1.4 配置Yarn

配置Yarn淘宝源：

//配置Yarn淘宝源
yarn config set registryhttps://registry.npm.taobao.org -g
yarn config set sass_binary_sitehttp://cdn.npm.taobao.org/dist/node-sass -g

//显示所有配置项
yarn config list

//查看Yarn的版本
yarn --version
1
2
3
4
5
6
7
8
9

查看Yarn的版本-yarn --version:

二、Yarn常用命令

//安装yarn
npm install --global yarn
或
npm install --g yarn

//查看版本号
yarn --version

//创建文件夹yarn
md yarn

//进入yarn文件夹
cd yarn

//初始化项目
yarn init // 同npm init，执行输入信息后，会生成package.json文件

//yarn的配置项
//显示所有配置项
yarn config list 

//显示某配置项
yarn config get 

//删除某配置项
yarn config delete

//设置配置项
yarn config set [-g|--global] 

使用npm config get 和npm config list命令可以获取配置的信息
npm config set 参数:可以设置相关内容。


//安装包
//安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install

//安装一个包的单一版本
yarn install --flat 

//强制重新下载所有包
yarn install --force 

//只安装dependencies里的包
yarn install --production 

//不读取或生成yarn.lock
yarn install --no-lockfile

//不生成yarn.lock
yarn install --pure-lockfile

//添加包（会更新package.json和yarn.lock）
// 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package] 

//安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[version] 

//安装某个tag（比如beta,next或者latest）
yarn add [package]@[tag]


//不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
//加到devDependencies
yarn add --dev/-D

//加到peerDependencies
yarn add --peer/-P 

//加到optionalDependencies
yarn add --optional/-O 


//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
//安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --exact/-E 

//安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0
yarn add --tilde/-T 

//发布包
yarn publish

//移除一个包
//移除一个包，会自动更新package.json和yarn.lock
yarn remove 

//更新一个依赖
//用于更新包到基于规范范围的最新版本
yarn upgrade

//运行脚本
yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本

//显示某个包的信息
yarn info 可以用来查看某个模块的最新版本信息

//缓存
yarn cache

//列出已缓存的每个包
yarn cache list 
//返回 全局缓存位置
yarn cache dir 
//清除缓存
yarn cache clean 


//----------------------------------------------
//npm config get 获取npm 相关配置信息
#npm config list            查看npm config配置的信息
#npm config get cache       获取cache配置的信息 (npm使用时的cache即缓存的配置路径)
#npm config get prefix      获取npm的全局模块的路径
#npm config get registry    获取镜像信息

#经过测试下列简化命令也适用
#npm  get cache       获取cache配置的信息 (npm使用时的cache即缓存的配置路径)
#npm  get prefix      获取npm的全局模块的路径
#npm  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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

三、npm 与 yarn命令比较

引用内容：什么是yarn？如何使用yarn安装依赖？

比如说你的项目模块依赖是图中描述的，@1.2.1代表这个模块的版本。在你安装A的时候需要安装依赖C和D，很多依赖不会指定版本号，默认会安装最新的版本，这样就会出现问题：比如今天安装模块的时候C和D是某一个版本，而当以后C、D更新的时候，再次安装模块就会安装C和D的最新版本，如果新的版本无法兼容你的项目，你的程序可能就会出BUG，甚至无法运行。这就是npm的弊端，而yarn为了解决这个问题推出了yarn.lock的机制，这是作者项目中的yarn.lock文件。
大家会看到，这个文件已经把依赖模块的版本号全部锁定，当你执行yarn install的时候，yarn会读取这个文件获得依赖的版本号，然后依照这个版本号去安装对应的依赖模块，这样依赖就会被锁定，以后再也不用担心版本号的问题了。其他人或者其他环境下使用的时候，把这个yarn.lock拷贝到相应的环境项目下再安装即可。
注意：这个文件不要手动修改它，当你使用一些操作如yarn add时，yarn会自动更新yarn.lock。

四、npm与yarn命令的使用

A Vue.js project 数据可视化项目-vue-echarts ：vue、 echarts、iview 实现大数据可视化大屏模板
项目预览地址：https://bym110.github.io/vue-echarts/preview 点击直达

具体的npm run命令或者yarn run命令根据该项目目录vue-echarts下的package.json文件中scripts的配置和需要来选择执行：

{
  "name": "vue-echarts",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "echarts": "4.9.0",
    "iview": "^3.1.3",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.8.1",
    "less-loader": "5.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}
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

4.1 npm命令的使用

# install dependencies
# 安装依赖
npm install

# serve with hot reload at localhost:8080
# 在localhost:8080上使用热重新加载服务
npm run serve

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
1
2
3
4
5
6
7
8
9
10
11
12
13

先进入项目vue-echarts的文件夹内，使用npm install命令来安装依赖，然后使用npm run serve 命令来加载服务。

项目本地成功运行：

4.2 yarn命令的使用

# install dependencies
# 安装依赖
yarn install

# serve with hot reload at localhost:8080
# 在localhost:8080上使用热重新加载服务
yarn run serve
1
2
3
4
5
6
7

先进入项目vue-echarts的文件夹内，使用yarn install命令来安装依赖，然后使用yarn run serve 命令来加载服务。

编译成功，点击链接访问：

App running at:

  - Local:   http://localhost:8082 
  - Network: http://192.168.1.12:8082
1
2

• Local: http://localhost:8082
  
• Network: http://192.168.1.12:8082
  

五、参考

IDEA中Node.js环境下npm报错Error:0308010C:digital envelope routines:unsupported
安装配置nvm-windows对Node.js与npm进行版本控制
Downloads
Download Node.js®
How to Contribute
Yarn
Installation
什么是yarn？如何使用yarn安装依赖？
什么是yarn？如何使用yarn安装依赖？
【亚马逊云科技产品测评】活动征文｜AWS EC2 部署Echarts大屏展示项目