发布于 由admin

JS `PnP (Plug’n’Play)` (Yarn)：更快的依赖安装与更小的 `node_modules`

各位观众老爷们，晚上好！我是今天的主讲人，很高兴能和大家聊聊 Yarn 的 PnP (Plug’n’Play) 这个神奇的东西。 相信大家都被 node_modules 这个巨无霸折磨过，动辄几百 MB，甚至上 GB，简直是硬盘杀手，安装速度慢到怀疑人生。 今天，我们就来聊聊如何用 PnP 干掉它，让你的依赖安装像闪电一样快，让你的项目体积小到可以放进 U 盘！

什么是 PnP (Plug’n’Play)？

简单来说，PnP 是一种全新的依赖管理策略，它彻底抛弃了传统的 node_modules 目录，转而使用一个 .pnp.cjs 文件来描述项目依赖的图谱。 想象一下，以前我们是把所有依赖都一股脑堆在一个大仓库里 (node_modules)，找东西的时候要翻箱倒柜；现在我们是给每个依赖都贴上标签，指明它的位置，需要的时候直接按标签索骥，效率自然大大提高。

PnP 的优势

  • 更快的安装速度： PnP 跳过了传统的 node_modules 创建过程，直接从缓存中读取依赖信息，安装速度提升了好几个数量级。 实测表明，对于大型项目，PnP 可以将安装时间缩短 50% 以上，甚至更多。
  • 更小的项目体积： 没有了 node_modules 这个大胖子，你的项目体积自然会大大减小。 这样不仅节省了硬盘空间，也加快了项目的传输和部署速度。
  • 更好的依赖管理： PnP 通过 .pnp.cjs 文件精确地描述了项目依赖关系，避免了依赖冲突和幽灵依赖等问题。 妈妈再也不用担心我的项目跑不起来了！
  • 增强的安全性： PnP 可以防止恶意脚本通过 node_modules 目录入侵你的项目。 因为没有 node_modules 目录，恶意脚本也就无处藏身了。

如何使用 PnP？

使用 PnP 非常简单，只需要几个简单的步骤：

  1. 确保你使用的是 Yarn 2+ 版本： PnP 是 Yarn 2 的核心特性，所以你需要升级到 Yarn 2 或更高版本。

    npm install -g yarn
yarn set version berry

  2. 启用 PnP 模式： 在你的项目根目录下运行以下命令，启用 PnP 模式。

    yarn config set nodeLinker node-modules

    然后更改为pnp模式

    yarn config set nodeLinker pnp

  3. 安装依赖： 像往常一样使用 yarn install 命令安装依赖。 Yarn 会自动生成 .pnp.cjs 文件。

    yarn install

  4. 运行你的项目： 现在你可以像往常一样运行你的项目了。 Yarn 会自动加载 .pnp.cjs 文件，并根据其中的依赖信息来解析模块。

    yarn start

.pnp.cjs 文件解析

.pnp.cjs 文件是 PnP 的核心，它包含了项目所有依赖的详细信息。 让我们来看一个简单的 .pnp.cjs 文件示例：

// .pnp.cjs
module.exports = {
  modules: {
    "lodash": {
      packageLocation: "/path/to/project/.yarn/cache/lodash-npm-4.17.21-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/node_modules/lodash/",
      packageId: "[email protected]",
      dependencies: {},
    },
    "react": {
      packageLocation: "/path/to/project/.yarn/cache/react-npm-17.0.2-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/node_modules/react/",
      packageId: "[email protected]",
      dependencies: {
        "loose-envify": "[email protected]",
      },
    },
    "loose-envify": {
      packageLocation: "/path/to/project/.yarn/cache/loose-envify-npm-1.4.0-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/node_modules/loose-envify/",
      packageId: "[email protected]",
      dependencies: {},
    },
  },
  packageLocation: "/path/to/project/",
};

这个 .pnp.cjs 文件描述了三个模块： lodash, react 和 loose-envify。 对于每个模块，它都包含了以下信息：

  • packageLocation: 模块的实际物理路径。 注意，这些模块都存储在 .yarn/cache 目录下，而不是 node_modules 目录下。
  • packageId: 模块的名称和版本号。
  • dependencies: 模块的依赖关系。 例如， react 依赖于 loose-envify。

当你在代码中 require('react') 时， Yarn 会读取 .pnp.cjs 文件，找到 react 模块的 packageLocation，然后直接从该路径加载模块。

PnP 的配置选项

Yarn 提供了一些配置选项，可以让你更好地控制 PnP 的行为。

配置选项 描述
nodeLinker 指定依赖解析策略。 node-modules 表示使用传统的 node_modules 目录， pnp 表示使用 PnP 模式。
pnpMode 指定 PnP 模式的类型。 strict 表示强制使用 PnP 模式， loose 表示允许回退到 node_modules 目录。
pnpEnableEsmLoader 启用或禁用 PnP 对 ESM 加载器的支持。 如果你的项目使用了 ESM 模块，你需要启用此选项。
pnpIgnorePatterns 指定要忽略的模块模式。 这些模块将不会被包含在 .pnp.cjs 文件中，而是会从 node_modules 目录中加载。
pnpUnstableHoisting 启用或禁用不稳定的依赖提升。 依赖提升是一种优化技术，可以将一些依赖提升到更高的层级，以减少重复依赖。 然而，这种技术可能会导致一些兼容性问题，所以默认情况下是禁用的。

你可以通过 yarn config set <option> <value> 命令来设置这些配置选项。 例如，要启用 PnP 对 ESM 加载器的支持，你可以运行以下命令：

yarn config set pnpEnableEsmLoader true

PnP 的常见问题及解决方案

虽然 PnP 带来了很多好处，但它也可能会引入一些问题。 下面是一些常见的 PnP 问题及解决方案：

  • 兼容性问题： 有些工具或库可能不兼容 PnP。 例如，一些编辑器插件可能无法正确地解析 PnP 依赖。 在这种情况下，你可以尝试以下解决方案：

    • 更新工具或库到最新版本。
    • 使用 pnpIgnorePatterns 配置选项来忽略不兼容的模块。
    • 禁用 PnP 模式，回退到 node_modules 目录。

  • 构建问题： 有些构建工具可能无法正确地处理 PnP 依赖。 例如， Webpack 4 可能需要一些额外的配置才能支持 PnP。 在这种情况下，你可以尝试以下解决方案：

    • 升级构建工具到最新版本。
    • 查阅构建工具的文档，了解如何配置 PnP 支持。
    • 使用 Yarn 提供的 PnP API 来手动解析依赖。

  • 调试问题： 在 PnP 模式下调试代码可能会比较困难，因为你无法直接在 node_modules 目录中找到依赖。 在这种情况下，你可以尝试以下解决方案：

    • 使用 Yarn 提供的 PnP API 来查找依赖的实际路径。
    • 使用编辑器提供的调试工具，设置断点并逐步执行代码。
    • 禁用 PnP 模式，回退到 node_modules 目录进行调试。

PnP 的最佳实践

  • 保持依赖清洁： 使用 yarn why 命令来分析依赖关系，并移除不必要的依赖。
  • 锁定依赖版本： 使用 yarn.lock 文件来锁定依赖版本，确保项目在不同环境下的一致性。
  • 定期更新依赖： 使用 yarn upgrade 命令来更新依赖到最新版本，修复安全漏洞并获得性能提升。
  • 使用 CI/CD 工具： 使用 CI/CD 工具来自动化构建、测试和部署流程，确保代码质量和稳定性。

PnP 的代码示例

假设我们有一个简单的 React 组件，它依赖于 lodash 库：

// src/components/MyComponent.js
import React from 'react';
import _ from 'lodash';

function MyComponent() {
  const numbers = [1, 2, 3, 4, 5];
  const squaredNumbers = _.map(numbers, (n) => n * n);

  return (
    <div>
      <p>Squared Numbers: {squaredNumbers.join(', ')}</p>
    </div>
  );
}

export default MyComponent;

为了让这个组件在 PnP 模式下正常工作，我们需要确保 lodash 库被正确地安装和引用。

  1. 安装依赖：

    yarn add react lodash

  2. 配置 Webpack (如果需要)：

    如果你的项目使用了 Webpack，你可能需要安装 @yarnpkg/pnpify-webpack 插件来支持 PnP。

    yarn add -D @yarnpkg/pnpify-webpack

    然后在你的 webpack.config.js 文件中添加以下配置：

    // webpack.config.js
const PnpWebpackPlugin = require('@yarnpkg/pnpify-webpack');

module.exports = {
  // ...
  resolve: {
    plugins: [
      PnpWebpackPlugin.plugin(),
    ],
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },
};

  3. 运行项目：

    现在你可以像往常一样运行你的项目了。 Webpack 会自动加载 .pnp.cjs 文件，并根据其中的依赖信息来解析模块。

    yarn start

PnP 的未来

PnP 是一种非常有前景的依赖管理策略，它正在被越来越多的开发者所采用。 未来，我们可以期待 PnP 在以下方面得到进一步的发展：

  • 更好的兼容性： 随着 PnP 的普及，越来越多的工具和库将会提供对 PnP 的原生支持。
  • 更强大的功能： Yarn 团队将会继续改进 PnP，增加更多的功能，例如支持多包仓库 (monorepo) 和远程缓存。
  • 更广泛的应用： PnP 将会被应用到更多的领域，例如 Serverless 和 Docker 容器。

总结

PnP 是 Yarn 2 引入的一项革命性的依赖管理技术，它通过抛弃传统的 node_modules 目录，实现了更快的安装速度、更小的项目体积、更好的依赖管理和增强的安全性。 虽然 PnP 可能会引入一些兼容性问题，但通过合理的配置和最佳实践，我们可以克服这些问题，充分利用 PnP 的优势。 如果你还没有尝试过 PnP，我强烈建议你试一试，相信你会爱上它的！

好了，今天的讲座就到这里。 感谢大家的观看！ 希望大家能够从今天的讲座中有所收获，并在自己的项目中应用 PnP 技术。 如果大家有什么问题，欢迎在评论区留言，我会尽力解答。

祝大家编程愉快！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注