[{"id":"cG9zdDozNjM=","slug":"going-beyond-npm-meet-yarn-pnpm","title":"Going beyond NPM: meet Yarn & pnpm","content":"\n

If you are a JS developer you probably use NPM multiple times a day without thinking about it. It’s the default package manager which ships with node.

\n\n\n\n

But have you wondered what if there was another way of managing your (probably too many 😉) packages? We will look at yarn and pnpm as worthy rivals.

\n\n\n\n

Update 27 Aug 2019 @ 21:23
As this user on reddit pointed out npm now supports offline installs too, so that part is the same for all three package managers. Also apparently the checksums, but I could now verify it.

Update 27 Aug 2019 @ 22:51
If you are having troubles with pnpm try using pnpm i shamefully-flatten. Thanks to this reddit user.

\n\n\n\n

For the lazy readers: Jump to the conclusion here.

\n\n\n\n

\"\" — Photo by Ruchindra Gunasekara on Unsplash

\n\n\n\n

You might wonder now: why? Why should I bother reading this when NPM works perfectly? Is this just another run to the latest framework? Don’t worry: there are actual reasons you might want to switch.

\n\n\n\n

Speed!!… or the lack of it?

\n\n\n\n

The biggest issue that plagues npm is speed. Unfortunately even with the latest version (6) npm is slow. If you ever had to delete the node_modules folder to do a clean install on a bigger project you will know what I mean. Fans start to spin, laptop gets warm and you can go read an article while npm chews on the dependencies.

\n\n\n\n

Yarn to the rescue

\n\n\n\n

Yarn came along in the early days and you definitely have heard about it wandering across Github. Back in the days (before npm 5 with the package-lock.json) Yarn addressed the issues with consistency by being the first to generate a lockfile (yarn.lock). This file could be checked in and the devs would have a consistent dependencies across multiple machines.

\n\n\n\n

Speed

\n\n\n\n

Yarn is often twice as fast as npm. It’s truly impressive and you need to see it for yourself to believe it. The CLI output is also way more human-friendly.

\n\n\n\n

Offline

\n\n\n\n

~~Every package version is only downloaded once, so if you happen to loose connection or need to download the same package again you will gain a substantial speed boost since they are cached locally.~~
See update at the top.

\n\n\n\n

yarn upgrade-interactive

\n\n\n\n

This is incredible 😍. If you run yarn upgrade-interactive you get an interactive CLI where you can choose what packages to upgrade and which not. It’s a simple thing, but one you cannot live without anymore if tried it once.

\n\n\n\n

yarn why

\n\n\n\n

Similar to the previous command this is a very handy cli goodie. simply run yarn why some-package and yarn will tell you why it was installed, from which dependency it came from, etc.

\n\n\n\n

Lack of npx

\n\n\n\n

Unfortunately Yarn lacks the npx equivalent of npm, which is the only drawback I encountered while using yarn. Other than that yarn is a very fast and a solid alternative to npm.

\n\n\n\n

PNPM: The underdog

\n\n\n\n

I truly love this project so I might be biased. They basically implemented a thought I had a while back: reuse the same packages across your computer. Confused? Let me explain:

\n\n\n\n

Have you ever measured the size of the your node_modules?

\n\n\n\n

du -sh node_modules\n# --> 816M   node_modules

\n\n\n\n

What?! 0.8Gb for a react-native project?!
Unfortunately that is a pretty common reality and pnpm aims to solve that.

\n\n\n\n

PNPM links your packages with symlinks. This means that the same version of a package only exists once on your computer. If you ever install the same package twice, it will simply symlinked to your node_modules. 🚀
On top of that it’s even faster than yarn.

\n\n\n\n

So perfection is achieved? Let’s all switch to pnpm?

\n\n\n\n

Unfortunately it’s not that easy. If you start a new project you can probably go with pnpm, but with existing projects I had some problems with building my apps. So it’s definitely experimental at best and should not be used without rigorous testing as it might break your app. pnpm also supports npx with pnpx.

\n\n\n\n

Conclusion Time

\n\n\n\n

	Speed	NPX	Offline	Well supported
npm	🐌	✅	✅	✅
yarn	🚄	❌	✅	✅
pnpm	🚀	✅	✅	❌

\n\n\n\n

As you can see above there is no clear winner. NPM is the most compatible of course but really falls behind in terms of speed. Yarn in my opinion is currently your best bet and fallback to npx your-command when npx is needed.
pnpm is an incredibly cool tool but is not ready yet for production. With react-native I can cause problems, but with the “normal” stacks it works very good. I will use pnpm for my personal projects from now on.

\n","status":"publish","date":"2019-08-27T16:36:06","modified":"2020-09-22T20:49:49","tags":{"nodes":[{"id":"dGVybTozMQ==","slug":"javascript","name":"javascript","count":3},{"id":"dGVybTo0MA==","slug":"node","name":"node","count":1},{"id":"dGVybTo0MQ==","slug":"npm","name":"npm","count":1},{"id":"dGVybTo0NA==","slug":"pnpm","name":"pnpm","count":1},{"id":"dGVybTo1OA==","slug":"yarn","name":"yarn","count":1}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-300x168.jpg 300w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-1024x574.jpg 1024w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-150x84.jpg 150w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-768x430.jpg 768w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-1536x861.jpg 1536w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-2048x1148.jpg 2048w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-500x280.jpg 500w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-800x448.jpg 800w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-1200x673.jpg 1200w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-1500x841.jpg 1500w, https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-2000x1121.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2019/08/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-scaled.jpg"}}}]