乐趣区

关于yarn:升级Yarn-2摆脱nodemodules

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 多万,运行速度也成倍晋升。

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

退出移动版