升级 Yarn 2，大规模瘦身 node_modules
↓推荐关注↓
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多万，运行速度也成倍提升。
怎么样，是不是很值得一试呢？
与vscode中的eslint整合
Yarn 2可能导致vscode中的eslint失效，因此需要在项目根目录下执行以下命令：
yarn dlx @yarnpkg/sdks vscode
同时，安装对eslint-import-resolver-node的依赖：
yarn add -D eslint-import-resolver-node
同时，eslint-import-resolver-alias依赖年久失修，会导致更严重的问题，因此建议拆除并关闭相应警告。
"import/no-unresolved": "off",
"import/extensions": "off",
与storybook整合
如果在使用storybook时有错误，那么目前的berry版本还不够，需要将yarn升级到更高的canary版本：
yarn set version canary作者：张京
https://segmentfault.com/a/1190000040520326
- EOF -
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️