How does yarn link help developers debug NPM packages?

Hello everyone , I'm brother watermelon . Recent research React Source code , Yes yarn link Command to link two items .

I became interested in its underlying principles , So I wrote such an article , I hope that through the form of story , Let us understand yarn link Usage scenarios and usage .

in addition npm link and yarn link The effect is the same , Not mentioned below npm link 了 .

one day , A name maintained by xiaogua is xigua Of NPM package , Was mentioned issue. Melon looked at the problem description , With familiarity with the project , He probably knows what went wrong .

In order to test , Melon built a demo-project project , And this project passed yarn add xiga Installed this package , And used it in the code .

└── demo-project
    └── node_modules
        ├── apple
        └── xigua
            ├── old.js
            └── package.json

Theoretically , Melon, go to this demo-project Project node_module/xigua Just modify the code directly under the directory .

But unfortunately , The code inside is compiled , It's not possible to modify .

Little melon then ran xigua-project Package source code project , Run a generation that can monitor source code modification npm Command of package content . Melon modified a code , Then it is automatically compiled to xigua-project/build/ in .

└── xigua-project
    └── build
        └── xigua（ Compiled folder ）
            ├── fix.js
            └── package.json

Then melon copies the compiled code , Cover up the original demo-project/node_module/xigua , Then see if the effect is wrong . Melon found something wrong , Re reform , And then copy , Repeated several times in a row .

“ I can't bear it , We need to find a way .” Melon said . Copy manually after each compilation , It's too annoying .

Witty little melon, think about it , Finally came up with a way .

1. take demo-project Under the xigua Dependent package deletion

2. And then create a xigua Soft link file , link to xigua-project Compile folder under （ Soft links can be understood as shortcut files , You can redirect the file location ）

├── demo-project
│   └── node_modules
│       ├── apple
│       └── xigua（ Redirect ） -> /xigua/build/node_modules/xigua
└── xigua-project
    └── build
        └── xigua（ Linked location ）
            ├── fix.js
            └── package.json

Use soft links , We linked the two projects .

yarn link

here , Roommate xiaorun passed by with his cuddle , Yu is the name of his cat .

Melon is complacent about his wonderful ideas , Immediately boast to Xiao run .

Xiaorun ：“ This requirement , Package manager is supported by related commands .”

Melon ：“ Unexpectedly ！ Expand and talk about how to use .”

Xiao run then explained .

It's very simple , We enter xigua/build/xigua Under the table of contents , perform yarn link

$ yarn link

yarn link v1.22.17
success Registered "xigua".
info You can now run `yarn link "xigua"` in the projects where you want to use this package and it will be used instead.
  Done in 0.01s.

such , The package management tool will Register a global name xiuga Link to .

Specifically, create a xigua Soft link file , Point to this xigua Catalog . stay macOS in , Is in ~/.config/yarn/link/xigua Under the table of contents .

The link points to the following ：

~/.config/yarn/link/xigua  ->  /xigua-project/build/xigua

More precisely ,yarn link It will look up from the current working directory, and the first one will be correct package.json File directory , As a linked object , because npm There must be package.json.

Next we'll run to demo-project Project directory , perform yarn link xigua.

$ yarn link xigua

yarn link v1.22.17
success Using linked package for "xigua".
  Done in 0.01s.

It can do two operations ：

1. take demo-project Under the xigua Dependent package deletion

2. And then create a xigua Soft link file , link to yarn/link/xigua. formation demo-project -> yarn/link -> xigua-project Chain .

Melon was shocked ：“ This operation is the same as mine ？ But one more A middleman yarn”

Yes , but yarn More convenient .

yarn unlink

you are here demo-project The test is over , Want to disconnect the link , It needs to be executed at this time ：

$ yarn unlink xigua

yarn unlink v1.22.17
success Removed linked package "xigua".
info You will need to run `yarn install --force` to re-install the package that was linked.
  Done in 0.01s.

After breaking the link , Because the original package was deleted and a link file was changed , So we need to pack this again , You need to perform yarn install --force.

You said I delete node_modules, And then execute yarn OK? .

Sure , The premise is that your node_modules There are no links to other packages , Otherwise, the links of other packages will be killed .

If you want to delete the global registration, the name is xigua Of link, You need to enter the linked directory , perform yarn unlink

$ yarn unlink

yarn unlink v1.22.17
success Unregistered "xigua".
info You can now run `yarn unlink "xigua"` in the projects where you no longer want to use this package.
  Done in 0.01s.

ending

yarn link The function of is to help us debug and develop NPM package .

Because the dependent package installation of ordinary projects is downloaded and installed from the network , If you want to use locally compiled NPM package , A better way is to delete the dependent package , Link our local compilation package through shortcuts .

To simplify this process ,yarn link There is , Through the middle of the form , To achieve fast link and unlink.

I'm brother watermelon , Welcome to follow me , Learn the front end together .