node项目中最臭名昭著的莫过于nodemodules文件夹,这个糟糕的结构动辄使你的文件数目增加几万甚至几十万,无论是安装还是删除,都要消耗大量时间,并且占据大量inode结点,我们随便进入一个react项目文件夹,看一下由于有nodemodules会使你的项目中的文件个数变成多少:find。typefwcl223629 仅仅一个项目下面就有多达22万个文件。 现在我们来看一下目前的yarn版本号是多少:yarnversion1。22。11 嗯,目前yarn的版本号是1。22。11,那我们如何安装yarn2呢?答案是不需要安装,只需要设置就可以了。yarnsetversionberry 设置完了之后,我们再来看一下yarn的版本号:yarnversion3。0。0 不是说好的升级到yarn2吗?怎么变成3。0了?不用恐慌,越高越好。 然后我们来看一下项目文件夹下多了这么几个文件,首先就是根目录下多了一个。yarnrc。yml,里面只有一句话:yarnPath:。yarnreleasesyarnberry。cjs 相应的,还多了一个文件夹。yarn,里面有一个子文件夹releases,里面有一个文件yarnberry。cjs,这几个文件就是全部yarn2增加的内容了,这些内容不要在。gitignore里忽略,其它的内容是需要忽略的,现在我们来在。gitignore里增加一些需要忽略的内容:nodemodules。pnp。pnp。js。pnp。cjs。yarncache。yarnunplugged。yarninstallstate。gz 接下来,我们准备利用新版的yarn安装我们的依赖文件,在此之前,我们需要先设置一下yarn库的镜像服务器以加快整个下载过程:yarnconfigsetnpmRegistryServerhttps:registry。npm。taobao。org 这时候,你再打开项目根目录下的。yarnrc。yml文件,会发现里面多了一行:npmRegistryServer:https:registry。npm。taobao。orgyarnPath:。yarnreleasesyarnberry。cjs 所以我们知道其实这个yarnconfig命令也没有什么特别的地方,只是通过它来修改。yarnrc。yml文件而已,你也可以通过直接修改。yarnrc。yml文件来达到同样的效果。 现在,我们开始删除旧的nodemodules文件夹和yarn。lock文件,并重建整个项目:rmrfnodemodulesrmfyarn。lockyarn 整个下载过程应该还是比较顺利的,我们来看一下项目文件夹中多了哪些文件:。yarncache。yarnunplugged。pnp 没有了nodemodules文件夹,我们来看一下。yarncache文件夹下有什么内容,里面有我们之前依赖的nodemodules文件夹下的所有依赖包,但不再是以目录的形式存在,而是变成了一个个zip文件,yarn2就是利用项目根目录下的。pnp。cjs文件定位到这些zip文件以达到取代nodemodules的作用,这样极大程度地减少了项目中的文件个数。 下面我们开始启动项目:yarnstart 十有八九你的项目这时候是启动不起来的,不要慌,这篇文章告诉你所有的解决方法。 首先,你遇到错误可能是这样:Error:Yourapplicationtriedtoaccessterserwebpackplugin,thismakestherequirecallambiguousandunsound。 具体内容可能不一样,但你要注意这个关键词Yourapplication,这说明是你的代码当中的某个位置引用了后面的插件,但你没有在package。json文件中显式声明它,那为什么之前用yarn1或者npm的时候没有这个问题呢?因为以前是有nodemodules文件夹的,所有依赖包都被平摊在这个文件夹中,即使是被其它依赖的依赖引入的,它也会被释放在nodemodules根目录下,所以node可以很轻松地找到它,而现在这个文件夹没有了,我们必须显式地在package。json文件中引用它,才能引导yarn找到这个依赖项。因此,解决这种Yourapplication缺乏某个依赖项的方法很简单,我们只需要用yarn安装它就可以了:yarnaddDterserwebpackplugin 哦,又出错误了:Invalidoptionsobject。TerserPluginhasbeeninitializedusinganoptionsobjectthatdoesnotmatchtheAPIschema。 这是因为我们在安装的时候没有指定版本,导致安装的插件版本过高,我们在package。json里把版本降低一些:terserwebpackplugin:4。2。3, 然后重新执行yarn进行安装,运行yarnstart再次启动,终于启动起来了!不过,不要高兴得太早,又遇到了这样的问题:Error:Yourapplicationtriedtoaccessbabelplugintransformasynctogenerator,thismakestherequirecallambiguousandunsound。 不要慌,既然还是Yourapplication缺乏某个依赖包,那就还是我们的问题,停下来再安装它,然后再启动,直到解决完所有Yourapplication引起的问题。 这时候,产生了新的错误:Modulenotfound:rcbmaptriedtoaccessbabelruntime,thismakestherequirecallambiguousandunsound。 虽然同样是找不到依赖项,但这次的错误不是由于我们自己的应用导致的,而是由于依赖项自身导致的,这种问题该如何解决呢?不要急,我们打开。yarnrc。yml文件,按照错误提示增加以下设置:packageExtensions:rcbmap:dependencies:babelruntime: 缺什么咱们就增加什么,有时候还要注意版本号。同样,这个问题不是由于yarn2导致,而是因为我们的依赖项该增加的依赖没有增加而已,我们这里只是给它补全依赖,使它得以正常运行。 别忘了,每次修改完。yarnrc。yml之后,都需要重新执行yarn,然后再执行yarnstart。 至此为止,我们的项目终于能够成功运行了!我们来看一下目前项目文件夹中的文件个数:find。typefwcl17433 现在只有17000个文件了,比我们最开始的22万个文件减少了20多万,运行速度也成倍提升。 怎么样,是不是很值得一试呢? 文章来源于张京老师,https:segmentfault。coma1190000040520326