问题背景

最近发现很多前端框架或前端产品的学习和使用都用到了yarn，一开始不知道这是干什么的，后在网上搜索说是JS包管理工具，我一致都是用的nodeJs，难道node过时了，然后有一顿搜索，网上是这么介绍的。

Yarn是什么？

“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了：

npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。

同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。
"5.0.3",
"~5.0.3",
"^5.0.3"
“5.0.3”表示安装指定的5.0.3版本，“～5.0.3”表示安装5.0.X中最新的版本，“^5.0.3”表示安装5.X.X中最新的版本。这就麻烦了，常常会出现同一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug。

安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。

Yarn的优点

速度快 。速度快主要来自以下两个方面：

并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。

离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。
安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。
更简洁的输出：npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
多注册来源处理：所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。

Yarn和npm命令对比

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

安装准备

一般前端框架在介绍依赖的开发环境时，都建议安装最新的NodeJs，我查了一下，当前最新版为17.8.0，如下图：

安装yarn

执行node命令

npm install -g yarn

npm ERR! Unexpected token '.'错误如下

问题解决

通过网上介绍的类似问题排查与尝试，发现自己安装的nodeJs版本太高导致，因此在看到前端框架的产品介绍中说依赖环境最新版nodeJs时，一定要慎重。我把nodeJs 17.8.0卸载，改用之前安装的14.18.1再次安装yarn，则成功了，如下图：

yarn设置源

为了进一步提高下载包的速度，可以设置yarn的源为国内淘宝镜像，如下：

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

验证一下设置是否生效

yarn config get registry

npm设置源

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

验证一下设置是否生效

npm config get registry

设置过程如下图：

npm安装yarn报npm ERR Unexpected token ‘.‘错误的解决办法相关推荐

服务商模式下微信小程序支付时，一直报“支付验证签名失败”错误的解决办法
在写小程序支付的时候,我是以服务商模式发起的支付,统一下单接口是调用成功的,但是在小程序调起支付的时候就报"支付验证签名失败"的错误. 主要有三个原因: 1.第二次签名用到的tim ...
一招解决 adb logcat 输出日志报错 read: unexpected EOF 俩种解决办法设置缓存区清空logcat 缓存
问题: adb 输出日志报错read: unexpected EOF! 然后adb 就自动中断了 read: unexpected EOF! 原因: logcat 进程异常退出,是因为 log buf ...
新手安装hadoop教程和个人遇到的错误及解决办法（错误：./hadoop-daemon.sh start journalnode用不了和WARNING: HADOOP_SECURE_DN_USER）
首先Hadoop的安装分为三大步(视频教程移步https://www.bilibili.com/video/BV1mL4y1T7em?spm_id_from=333.337.search-card.a ...
关于Eslint语法检查报“error Extra semicolon semi”错误的解决办法
1."error Extra semicolon semi"错误在学习编写Vue3.0项目的时候,你可能还会发现,比如,用响应式模板创建的组件里的语句import { react ...
spark环境安装及配置详细（附带相关错误及解决办法）
安装spark之前需要成功安装scala 解压安装包更改名字修改环境变量使环境变量生效修改配置文件进入spark目录进入conf 查看文件更改文件名称将spark-env.sh.tem ...
npm 安装模块报node-gyp ERR!
报错信息 gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/fis3/node_m ...
vue2.x 在引用插件的时候，npm run dev跑正常，npm run build 报错vue-cli Unexpected token: punc (() [...
这是因为,引用的插件在node_modules里,并不在vue-cli的es6编译范围内,所以语法报错,修改方法: 转载于:https://www.cnblogs.com/cynthia-wuqian ...
npm安装electron报RequestError: socket hang up错误解决方法
具体报这个错误的原因是国外地址网络访问请求超时解决方法: 1.配置镜像源 export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron ...
树莓派安装opencv报错“opencv2/xfeatures2d/cuda.hpp”，解决办法
找不到"opencv2/xfeatures2d/cuda.hpp"文件或位置, 1.打开报错的文件 2.通过winscp找到cuda.hpp文件的路径 3.替换报错路径其他的报错 ...

npm安装yarn报npm ERR Unexpected token ‘.‘错误的解决办法

npm安装yarn报npm ERR! Unexpected token '.'错误的解决办法