Upgrade Yarn 2, get rid of node_modules

node most infamous of the node_modules folder. This bad structure can easily increase the number of your files by tens of thousands or even hundreds of thousands. Whether it is installation or deletion, it takes a lot of time and occupies a large number of inode nodes. Let's just enter a react project folder and see how many files in your project will become node_modules

$ find . -type f | wc -l
223629

There are as many as 220,000 files under just one project.

Now let's take a look at the current version number yarn

$ yarn --version
1.22.11

Ah, the current yarn version number is 1.22.11 , then how do we install yarn 2 it? The answer is that you don't need to install it, you just need to set it up.

$ yarn set version berry

After setting up, let's take a look at the version number of yarn

$ yarn --version
3.0.0

Isn't it a good upgrade to yarn 2 ? How did it become 3.0 ? Don't panic, the higher the better.

Then let's take a look at the additional files in the project folder. First of all .yarnrc.yml root directory, which contains only one sentence:

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

Correspondingly, there is an additional .yarn releases , which contains a file yarn-berry.cjs . These files are all the yarn 2 added by 06119dbc8b1c56. These contents should not be .gitignore . Other contents are needed. Ignored, now let's add some content that needs to be ignored .gitignore

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

Next, we are ready to use the new version of yarn install our dependent files. Before that, we need to set up yarn library to speed up the entire download process:

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

At this time, if you open the .yarnrc.yml file in the project root directory, you will find that there is an extra line in it:

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

So we know yarn config command. It is only used to modify the .yarnrc.yml file. You can also directly modify the .yarnrc.yml file to achieve the same effect.

Now, we start to delete the old node_modules folder and yarn.lock file, and rebuild the entire project:

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

The entire download process should be relatively smooth, let's take a look at which files are extra in the project folder:

.yarn/cache
.yarn/unplugged
.pnp

Without the node_modules folder, let’s take a look at what is in the .yarn/cache folder. There are node_modules folder that we depended on before, but they no longer exist in the form of directories, but become one by one. zip file, yarn 2 .pnp.cjs file under the project root directory to locate these zip files to replace node_modules , which greatly reduces the number of files in the project.

Now we start the project:

yarn start

In all likelihood, your project will not start at this time. Don't panic. This article tells you all the solutions.

First of all, you may encounter an error like this:

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.

The specific content may be different, but you should pay attention to the keyword Your application , which means that a place in your code refers to the later plug-in, but you did not package.json file, so why use yarn 1 or npm there no such problem in 06119dbc8b1db5? Because in the past there node_modules folder, all dependencies are shared equally in this folder, even introduced other dependencies of dependencies, it will be released in node_modules the root directory, so node can easily find It, and now this folder is gone, we must explicitly package.json file to guide yarn find this dependency. Therefore, the solution to the Your application is very simple, we only need to install it yarn

yarn add -D terser-webpack-plugin

Oh, something went wrong again:

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

This is because we did not specify the version when installing, resulting in the installed plug-in version is too high, we lower the version package.json

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

Then re-execute yarn to install, run yarn start to start again, and finally start up! However, don't be too happy too early and run into this problem again:

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.

Don't panic, since Your application still lacks a certain dependency package, it is still our problem. Stop and install it, then start again, until all the Your application caused by 06119dbc8b1e48 are solved.

At this time, a new error occurred:

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.

Although the dependency is also not found, the error this time is not caused by our own application, but by the dependency itself. How to solve this problem? Don't worry, let's open the .yarnrc.yml file and add the following settings according to the error message:

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

We can add whatever is missing, and sometimes pay attention to the version number. Similarly, this problem is not caused by yarn 2 , but because our dependencies have not increased. We are just filling it with dependencies to make it run normally.

Don't forget, .yarnrc.yml , you need to execute yarn , and then execute yarn start .

So far, our project can finally run successfully! Let's take a look at the number of files in the current project folder:

$ find . -type f | wc -l
17433

Now there are only 17000 files, which is less than 20 more than 10,000 files 22 , and the running speed has also doubled.

How about it, is it worth a try?