node yarn

by Alcides Queiroz

通过Alcides Queiroz

如何使用Yarn Plug'n'Play摆脱node_modules (How to get rid of node_modules with Yarn Plug’n’Play)

将您的安装时间减少多达70％。 问我如何！ ？ (Reduce your install time up to 70%. Ask me how! ?)

Anyone who knows me can confirm that I’m a long-standing lover of JavaScript and its entire ecosystem. As a Front-end engineer, Node-based package managers have been a crucial part of my toolset since 2013.

任何认识我的人都可以确认我是JavaScript及其整个生态系统的长期爱好者。 自2013年以来，作为一名前端工程师，基于节点的软件包管理器一直是我工具集的关键部分。

First, I used Bower, which was primarily focused on the front-end world. Then, in 2015, I sadly (ok, not really) realized that Bower was dying and NPM, the default package manager for Node, was the way to go for the front-end too. It was strange for me, at first, to use NPM for other things than Node modules, but I got used to the idea and migrated seamlessly.

首先，我使用了Bower，它主要专注于前端世界。 然后，在2015年，我可悲的是(很好， 不是真的 )意识到Bower快要死了，而Node的默认软件包管理器NPM也是去前端的一种方式。 起初，我将NPM用于Node模块之外的其他事情对我来说很奇怪，但是我习惯了这个想法并无缝迁移。

Finally, just one year later, Facebook gave us Yarn, a modern and blazing fast alternative to NPM. I loved it at first sight! But some things were still problematic…

终于，仅仅一年后，Facebook给了我们Yarn，这是NPM的现代而又快速的替代方案。 我一见钟情！ 但是有些事情还是有问题的……

纱线中的继承问题 (Inherited problems in Yarn)

Besides the speed, Yarn brought a number of advantages when compared to the NPM version at the time, such as lock files, offline mode, network resilience, checksums and others. Nevertheless, Yarn borrowed some known problems from NPM:

除了速度之外，与当时的NPM版本相比，Yarn还带来了许多优势，例如锁定文件，脱机模式，网络弹性，校验和等。 但是，Yarn从NPM借来了一些已知的问题：

这里到处都有node_modules (node_modules here, there, everywhere)

For each project on your machine that uses NPM or Yarn, a node_modules folder is created. It doesn't matter if 10 projects use the exact same version of a given module, it will be copied over and over into each node_modules folder of these projects.

对于计算机上使用NPM或Yarn的每个项目， node_modules创建一个node_modules文件夹。 十个项目是否使用给定模块的完全相同的版本都没关系，它将一遍node_modules复制到这些项目的每个node_modules文件夹中。

生成新的node_modules文件夹需要很长时间 (Generating a new node_modules folder takes a really long time)

Even taking a great leap forward in terms of installation speed, Yarn was constrained by node_modules limitations. Just creating the node_modules folder takes up to 70% of the time needed to run yarn install (with a warm cache). It's a huge amount of files to be created on every installation. So, don't blame it on Yarn.

即使在安装速度方面取得了长足的进步，Yarn仍然受到node_modules限制的约束。 仅创建node_modules文件夹最多会花费70％的时间运行yarn install (带有热缓存)。 每次安装都会创建大量文件。 因此，不要将其归咎于Yarn。

依赖项未添加到package.json (Dependencies not added to package.json)

Here’s a scenario for you: Your app works perfectly in development, but crashes in production. After hours of investigation, you finally realize that you forgot to add a dependency to your package.json. Yes, it can happen.

这是为您提供的一种方案：您的应用程序在开发中运行完美，但在生产中崩溃。 经过数小时的调查，您终于意识到，您忘记为package.json添加依赖项。 是的，有可能发生。

运行时模块分辨率慢 (Slow module resolution at runtime)

The boot time of your app is heavily impacted by the way Node resolves dependencies. It wastes time querying the file system to discover where a given dependency will be resolved from.

您的应用程序的启动时间受节点解决依赖关系的方式的严重影响。 浪费时间查询文件系统以发现将从中解析给定依赖项的时间。

毛线即插即用！ (Yarn Plug’n’Play to the rescue!)

All of the above problems were addressed by the Yarn team with the release of the Plug’n’Play feature last September.

去年9月，Yarn团队发布了Plug'n'Play功能，解决了上述所有问题。

When you enable PnP, instead of copying every needed file from the cache to the node_modules folder, here's what Yarn does:

启用PnP后，Yarn会执行以下操作，而不是将每个需要的文件从缓存复制到node_modules文件夹中：

1. It creates a single file with static resolution tables. These tables will contain a bunch of important info, such as: packages available in the dependency tree, how they relate between themselves and their location on the disk.它使用静态分辨率表创建一个文件。 这些表将包含一堆重要信息，例如：依赖关系树中可用的软件包，它们之间的关系以及它们在磁盘上的位置。

2. A special resolver is used in order to help Node discovering where each dependency has been installed (under the Yarn cache folder). It solely relies on the resolution tables which were created previously. As these tables contain information about the entire dependency tree, the node_modules resolution process won’t need to make a lot of stat and readdir calls at runtime anymore, significantly reducing your app boot time. And as Yarn knows all of your dependencies, it will complain if you try to import a module that's not present in your package.json:

   为了帮助Node发现每个依赖项的安装位置(在Yarn缓存文件夹下)，使用了一个特殊的解析器。 它仅依赖于先前创建的分辨率表。 由于这些表包含有关整个依赖关系树的信息，因此node_modules解析过程不再需要在运行时进行大量的stat和readdir调用，从而大大减少了应用程序的启动时间。 而且由于Yarn知道您的所有依赖关系，因此如果您尝试导入package.json不存在的模块，它将发出抱怨：

使用毛线即插即用 (Using Yarn Plug’n’Play)

Converting a project to make use of PnP is easy as 1–2–3. You just need to add a installConfig section to your package.json, with a pnp key set to true, like this one:

转换项目以使用PnP的过程很简单，为1-2-3。 您只需要在package.json添加installConfig部分，并将pnp密钥设置为true ，就像这样：

{    "installConfig": {     "pnp": true   }}

Note: You need Yarn v1.12+ in order to use Plug’n’Play.

注意：您需要使用Yarn v1.12 +才能使用Plug'n'Play。

After that, just run yarn install and everything inside your node_modules folder will be deleted. From now on, every dependency will be resolved directly from Yarn's hot cache.

之后，只需运行yarn install ， node_modules文件夹内的所有内容都将被删除。 从现在开始，每个依赖关系都将直接从Yarn的热缓存中解决。

在带有create-react-app的新React项目中使用PnP (Using PnP in a new React project with create-react-app)

If you use create-react-app 2+, the good news is that it works great with Yarn Plug’n’Play! Just append the --use-pnp option to the create-react-app command and you're good to go:

如果您使用create-react-app 2+，那么好消息是它可以与Yarn Plug'n'Play一起使用！ 只需将--use-pnp选项附加到create-react-app命令，就可以了：

npx create-react-app your-app-name --use-pnp

可能的问题 (Possible issues)

As nothing is perfect in the world, PnP may incur new issues when used in projects relying on a custom install logic. If you need more info about these potential new issues, you can find a detailed explanation in this paper.

由于世界上没有什么是完美的，PnP在依赖自定义安装逻辑的项目中使用时可能会引发新的问题。 如果您需要有关这些潜在新问题的更多信息， 可以在本文中找到详细的说明 。

结论 (Conclusion)

Plug’n’Play solves some really annoying problems in Yarn. Besides, it dramatically improves dependency caching on CIs, saving installation time and allowing our builds to get right to the point: running the tests!

Plug'n'Play解决了Yarn中一些非常烦人的问题。 此外，它极大地改善了对CI的依赖项缓存，节省了安装时间，并使我们的构建工作得以进行： 运行测试！

And that’s it! Have fun with Yarn PnP.

就是这样！ 玩Yarn PnP。

翻译自: https://www.freecodecamp.org/news/getting-rid-of-node-modules-with-yarn-plugn-play-a490e5e747d7/

node yarn