背负青天而莫之夭阏者,而后乃今将图南。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 互联网 > 技术教程 > 正文

升级Yarn 2,摆脱node_modules

jellybean 2022-04-15 46 浏览 0 评论

node项目中最臭名昭著的莫过于node_modules文件夹,这个糟糕的结构动辄使你的文件数目增加几万甚至几十万,无论是安装还是删除,都要消耗大量时间,并且占据大量inode结点,我们随便进入一个react项目文件夹,看一下由于有node_modules会使你的项目中的文件个数变成多少:

$ find . -type f | wc -l
223629

仅仅一个项目下面就有多达22万个文件。

现在我们来看一下目前的yarn版本号是多少:

$ yarn --version
1.22.11

嗯,目前yarn的版本号是1.22.11,那我们如何安装yarn 2呢?答案是不需要安装,只需要设置就可以了。

$ yarn set version berry

设置完了之后,我们再来看一下yarn的版本号:

$ yarn --version
3.0.0

不是说好的升级到yarn 2吗?怎么变成3.0了?不用恐慌,越高越好。

然后我们来看一下项目文件夹下多了这么几个文件,首先就是根目录下多了一个.yarnrc.yml,里面只有一句话:

yarnPath: .yarn/releases/yarn-berry.cjs

相应的,还多了一个文件夹.yarn,里面有一个子文件夹releases,里面有一个文件yarn-berry.cjs,这几个文件就是全部yarn 2增加的内容了,这些内容不要在.gitignore里忽略,其它的内容是需要忽略的,现在我们来在.gitignore里增加一些需要忽略的内容:

/node_modules
/.pnp
.pnp.js
.pnp.cjs
.yarn/cache
.yarn/unplugged
.yarn/install-state.gz

接下来,我们准备利用新版的yarn安装我们的依赖文件,在此之前,我们需要先设置一下yarn库的镜像服务器以加快整个下载过程:

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

这时候,你再打开项目根目录下的.yarnrc.yml文件,会发现里面多了一行:

npmRegistryServer: 'https://registry.npm.taobao.org'
yarnPath: .yarn/releases/yarn-berry.cjs

所以我们知道其实这个yarn config命令也没有什么特别的地方,只是通过它来修改.yarnrc.yml文件而已,你也可以通过直接修改.yarnrc.yml文件来达到同样的效果。

现在,我们开始删除旧的node_modules文件夹和yarn.lock文件,并重建整个项目:

$ rm -rf node_modules
$ rm -f yarn.lock
$ yarn

整个下载过程应该还是比较顺利的,我们来看一下项目文件夹中多了哪些文件:

.yarn/cache
.yarn/unplugged
.pnp

没有了node_modules文件夹,我们来看一下.yarn/cache文件夹下有什么内容,里面有我们之前依赖的node_modules文件夹下的所有依赖包,但不再是以目录的形式存在,而是变成了一个个zip文件,yarn 2就是利用项目根目录下的.pnp.cjs文件定位到这些zip文件以达到取代node_modules的作用,这样极大程度地减少了项目中的文件个数。

下面我们开始启动项目:

yarn start

十有八九你的项目这时候是启动不起来的,不要慌,这篇文章告诉你所有的解决方法。

首先,你遇到错误可能是这样:

Error: Your application tried to access terser-webpack-plugin, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

具体内容可能不一样,但你要注意这个关键词Your application,这说明是你的代码当中的某个位置引用了后面的插件,但你没有在package.json文件中显式声明它,那为什么之前用yarn 1或者npm的时候没有这个问题呢?因为以前是有node_modules文件夹的,所有依赖包都被平摊在这个文件夹中,即使是被其它依赖的依赖引入的,它也会被释放在node_modules根目录下,所以node可以很轻松地找到它,而现在这个文件夹没有了,我们必须显式地在package.json文件中引用它,才能引导yarn找到这个依赖项。因此,解决这种Your application缺乏某个依赖项的方法很简单,我们只需要用yarn安装它就可以了:

yarn add -D terser-webpack-plugin

哦,又出错误了:

Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.

这是因为我们在安装的时候没有指定版本,导致安装的插件版本过高,我们在package.json里把版本降低一些:

"terser-webpack-plugin": "^4.2.3",

然后重新执行yarn进行安装,运行yarn start再次启动,终于启动起来了!不过,不要高兴得太早,又遇到了这样的问题:

Error: Your application tried to access @babel/plugin-transform-async-to-generator, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

不要慌,既然还是Your application缺乏某个依赖包,那就还是我们的问题,停下来再安装它,然后再启动,直到解决完所有Your application引起的问题。

这时候,产生了新的错误:

Module not found: rc-bmap tried to access babel-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

虽然同样是找不到依赖项,但这次的错误不是由于我们自己的应用导致的,而是由于依赖项自身导致的,这种问题该如何解决呢?不要急,我们打开.yarnrc.yml文件,按照错误提示增加以下设置:

packageExtensions:
  'rc-bmap@*':
    dependencies:
      'babel-runtime': '*'

缺什么咱们就增加什么,有时候还要注意版本号。同样,这个问题不是由于yarn 2导致,而是因为我们的依赖项该增加的依赖没有增加而已,我们这里只是给它补全依赖,使它得以正常运行。

别忘了,每次修改完.yarnrc.yml之后,都需要重新执行yarn,然后再执行yarn start

至此为止,我们的项目终于能够成功运行了!我们来看一下目前项目文件夹中的文件个数:

$ find . -type f | wc -l
17433

现在只有17000个文件了,比我们最开始的22万个文件减少了20多万,运行速度也成倍提升。

怎么样,是不是很值得一试呢?

相关推荐

什么是反编译?
什么是反编译?

反编译反编译是将可执行的(准备运行的)程序代码(也称为目标代码)转换为某种形式的高级编程语言,使其具有更易读的格式。反编译是一种逆向工程,它的作用与编译器的作用...

3天前 jellybean

apktool详细使用方法

工具/原料apktool电脑java环境方法/步骤配置JAVA环境,搜索。下载apktool,链接https://www.aliyundrive.com/s/VoBnjFNAskL下载后解压到E盘...

MobSF框架分析

总体mobSF使用django框架开发,使用sqlite进行的存储,可以上传代码、app、zip进行扫描,可以进行静态分析和动态分析静态扫描静态扫描就是反编译apk的过程,对反编译后的代码进行四大组件...

分享一个比较好用的反编译的工具
分享一个比较好用的反编译的工具

安卓相关的工作有时候会需要用到反编译,不管是开发工程师去参考别人的源码,还是测试工程师进行安全测试。这里分享一个比较好用的反编译工具——jadx一般找反编译的教...

3天前 jellybean

2022-python-6 数据类型转换

本章涉及的函数有str()函数、int()函数和float()函数1、str()函数:将其他数据类型转换成字符串整数、浮点数和布尔数都可以转换成字符串,需要注意的是也可以用引号转换例:str(123)...

web开发之-PHP类型转换

php的类型上一篇文章已经讲过了,那么,当我有一个字符串变量,我想要把这个字符串转换成整型,能否转换呢?答案是肯定的,可以的!我们先思考下面一个例子:<?php$a="123...

android中字符串和数字互相转换

一、android中字符串转换成整型各种数字类型转换成字符串型:Strings=String.valueOf(value);//其中value为任意一种数字类型。二、字符串型转换成各种...

python-数值7如何转换成字符串007

想写脚本把一堆文件名前面添加上编号,类似于001,002这种,但如果直接使用数值呢,前面是没有0的,这时就需要用到python的字符串格式化功能。格式化数值代码:"{0:03d}".f...

C语言字符串操作总结大全(超详细)

C语言字符串操作总结大全(超详细)1)字符串操作strcpy(p,p1)复制字符串strncpy(p,p1,n)复制指定长度字符串strcat(...

4天前 jellybean

GO 编程:字符串,各种int类型,map,结构体之间的相互转换和断言
GO 编程:字符串,各种int类型,map,结构体之间的相互转换和断言

总结了golang中结构体,字符串,各种int类型的相互转换方式//string转成int:int,err:=strconv.Atoi(string)...

4天前 jellybean

算法系列:整数反转(字符串)

7.整数反转描述给出一个32位的有符号整数,你需要将这个整数中每位上的数字进行反转。示例1输入:123输出:321复制代码示例2输入:-123输出...

Python中常用整数/字符串/字节间类型转换

工作中会遇到各种各样的数据转换的问题,从二进制到十进制,从字节串到整数等等,下面把这几种的转换具体说明下:1.整数之间的进制转换:10进制转16进制:hex(16)==>0x1016进制转...

Python数字与字符串互转的5个例子

在Python编程中,经常会遇见数字与字符串互相转换的问题,下面用5个例子进行简单介绍。1、整型转字符串,代码为:a=1234print(str(a))运行结果:1234。2、字符串转整型,代码...

每天带你学java:字符串和int类型转换
每天带你学java:字符串和int类型转换

每天学习一点点,一定要手动写噢!看会了是知识,能手动敲出来才会转化为你的技能。技能是练出来的,不是看出来的噢...

4天前 jellybean

Java编程技术分享之java整型转字符型

1、字符型转换成整型:1.转换成Int型int/Integernum=Integer.parseInt(Stringstr);2.转换成long型Long/longnum=Long.parseL...

取消回复欢迎 发表评论: