Parcel v2 发布！

2021-10-13

Parcel 团队非常激动地宣布 v2.0.0 稳定版现已发布！🎉

Parcel 2 带来了您从 Parcel 1 中熟知的零配置体验，并使其可扩展和可扩展到任何规模和复杂度的项目。 它已被 Atlassian、Adobe 和 Microsoft 等行业巨头用于生产环境。

查看我们的新网站和文档，以及 GitHub 上的仓库！

Parcel 2 的新功能？

Parcel 2 是 Parcel 的从头开始的重写，它触及了各个方面。如果您没有关注我们的预发布博客文章，这里有一些亮点。

🔌 全新的插件系统，使 Parcel 能够完全扩展。这使得 Parcel 能够从小型副项目扩展到具有复杂构建需求的大型生产应用程序。
🌳 默认启用树摇动，包括对 ES 模块、CommonJS、动态导入和 CSS 模块的支持。
🚀 巨大的性能提升，包括一个用 Rust 编写的新的 JavaScript 编译器，以及一个更并行的架构，可以利用您所有 CPU 内核的优势。
🖖 通过原生 ES 模块自动进行差异化捆绑，这使您能够使用现代 JavaScript 语法为大多数用户提供更小的捆绑包，并在需要时自动回退到旧版浏览器。
✂️ 自动代码拆分，包括将公共模块去重到可以并行加载和缓存的共享捆绑包中。
🖼 图像调整大小、转换和优化，包括对 AVIF 和 WebP 等现代图像格式的支持，以及对 JPEG 和 PNG 的自动无损优化。
💵 显着提高了缓存可靠性，包括跨机器的可移植性，以及对所有配置、插件、开发依赖项等的自动跟踪 - 无需配置！
🔥 改进的热重载，包括对 React Fast Refresh 的支持。
🪆 支持捆绑内联，这使您能够将捆绑包的编译内容嵌入到另一个捆绑包中，例如将图像内联为数据 URL。
📚 支持构建库，包括输出到 ES 模块、CommonJS，甚至捆绑 TypeScript 定义。
🧘 延迟开发模式，这使 Parcel 能够仅构建浏览器请求的文件，从而缩短开发服务器冷启动时间。
👷 改进的 Web Worker 支持，包括对原生 ES 模块工作者、工作者、服务工作者清单等的支持。
🚨 更好的诊断，具有漂亮的语法高亮代码帧、提示，甚至文档链接以了解更多信息。
👀 更可靠的文件观察者，用 C++ 编写并与底层操作系统 API 集成，即使在 Parcel 重启时也能实现快速细粒度缓存失效。
🗺 更快、更准确的源映射，使用 Parcel 的新源映射库，该库是用 Rust 编写的，比 Parcel 1 的性能提高了 20 倍。
… 还有更多！

查看迁移指南，了解如何将现有项目从 Parcel 1 升级到 Parcel 2。对于许多项目来说，这就像更新 package.json 中的依赖项一样简单！

如果您要启动一个新项目，我们有针对 Web 应用程序和库的入门指南，以及关于 Parcel 所有功能的完整文档，包括 Parcel 支持的所有语言和框架。

最后，查看我们的花哨的新主页，以概述 Parcel 2 中的所有功能！🥳

为什么选择 Parcel？

如今，有很多构建工具可供选择，那么是什么让 Parcel 2 与众不同呢？

Parcel 的理念是通过零配置来启用开箱即用的 Web 开发最佳实践，但允许您覆盖和扩展各个方面以满足您的需求。 最佳实践，如针对 HTTP2 优化的自动代码拆分、用于长期缓存的内容哈希文件名、差异化捆绑、树摇动、图像优化等，都完全自动支持。但是，如果您需要调整任何这些内容以匹配您的特定需求，您拥有完全的控制权。

Parcel 是为 Web 设计的，而不仅仅是 JavaScript。 大多数 Parcel 项目都从 HTML 文件开始，并从那里跟踪整个应用程序中的所有依赖项，就像 Web 浏览器一样。这包括 JavaScript、CSS、SVG、图像、字体、视频、WebGL 着色器、RSS 提要等等。原生 Web API（如 Web 工作者、服务工作者和 URL 引用）开箱即用。

Parcel 可以同时构建多个目标，例如具有 ES 模块、CommonJS 和 TypeScript 定义的库、应用程序的现代和传统版本，或者服务器和客户端。所有这些都并行构建，并在您进行更改时实时更新。

Parcel 的架构完全与语言无关，不是一个 JavaScript 捆绑器，而是为其他文件类型提供附加支持。插件系统旨在模拟现代 Web 开发的各个方面，从多步骤文件转换管道到捆绑、优化和压缩输出文件。每种插件类型都有一个特定且定义明确的 API，专为其目的而设计，并提供完整的文档和 TypeScript 定义。插件系统旨在提高性能，并具有自动并行化和缓存功能。

谁在使用 Parcel 2？

虽然我们今天才发布 Parcel 2 的稳定版，但它在预发布版中已经可用了一段时间，许多团队已经在生产环境中使用它。

在 Adobe，许多产品从 v1 开始就一直在使用 Parcel，其中一些产品已经在生产环境中使用 v2。这包括主要的 Experience Cloud 应用程序、React Spectrum 组件库、Adobe Launch、Adobe I/O App Builder 等等。使用 Parcel 2 导致捆绑包大小减少，从而提高了加载性能，这得益于新的自动代码拆分和改进的树摇动。

Atlassian 从一开始就参与了 Parcel 2 的开发，并对该项目投入了大量资金。他们帮助设计了 v2 的初始架构，目前资助了一个开发人员团队来为其做出贡献。这包括 Parcel 的许多贡献，包括核心捆绑算法、缓存架构等等。 Bitbucket 已经在生产环境中使用 Parcel 2，这使其交互时间指标比之前的基于 webpack 的构建设置提高了约 10%。此外，Parcel 的缓存提高了开发迭代速度，减少了开发人员在等待构建时花费的时间。

Microsoft 正在使用 Parcel 2 构建 docs.microsoft.com 网站的部分内容。

… 以及更多！

自 RC 版本以来有哪些新功能？

自我们的上一个版本以来，我们主要专注于错误修复和文档，但也添加了一些新功能。

一流的 SVG 支持

Parcel 现在具有完整的 SVG 支持，包括对由标签（如 <image> 和 <use>）引用的外部依赖项的支持，以及脚本和样式。它通过相关管道处理所有这些引用（例如，优化图像和缩小 CSS），并且 URL 会被重写以匹配输出文件名（例如，包括内容哈希）。

Parcel 还处理内联 <script> 和 <style> 元素，以及 style 属性和表示属性（如 fill）。

可以从 HTML、CSS、JavaScript 或其他任何地方将 SVG 引用为外部文件，Parcel 还处理嵌入在 HTML 中的 SVG。在 JavaScript 中，Parcel 还支持一个插件，将 SVG 转换为 JSX 以用于 React 等框架。

最后，Parcel 还包含一个基于 SVGO 的优化器，用于缩小 SVG 并减小其大小。

感谢 Chris Wilkinson 帮助实施了这一点！

图像优化器

Parcel 现在在生产模式下默认启用 JPEG 和 PNG 的无损图像优化。这会减小图像的大小，而不会以任何方式影响其质量。根据输入图像，它可能会产生惊人的效果。例如，我们新网站上的一个 PNG 从 ~700 KB 优化到 ~430 KB，而没有质量损失。现在，即使您没有意识到需要优化图像，您也会始终获得优化后的图像！

如果您想更进一步，请查看我们关于 Parcel 图像转换器的文档，它可以轻松地将图像调整大小并转换为 WebP 和 AVIF 等现代格式。

服务工作者运行时

Parcel 从很早就开始支持服务工作者。只需使用 navigator.serviceWorker.register API，Parcel 就会自动处理依赖项。但是，到目前为止，还没有内置的方法来访问服务工作者中 Parcel 生成的文件列表，您可能需要实现预缓存。

在此版本中，Parcel 现在有一个新的 @parcel/service-worker 包，您可以导入它来访问 URL 清单和版本哈希。这使得在安装服务工作者时预缓存所有文件变得很简单。

import {manifest, version} from '@parcel/service-worker';

async function install() {
  const cache = await caches.open(version);
  await cache.addAll(manifest);
}

addEventListener('install', e => e.waitUntil(install()));

查看 JavaScript 文档中的服务工作者部分以了解更多详细信息！

Gzip 和 Brotli 压缩

Gzip 和 Brotli 压缩通常由服务器和 CDN 自动完成，但有时您需要提前上传预压缩的捆绑包。这还可以实现更好的压缩，这对于每个网络请求来说都太慢了。

由于并非每个人都需要它，因此压缩是可选的。只需将 @parcel/compressor-gzip 和/或 @parcel/compressor-brotli 添加到您的 .parcelrc 中。然后，您将获得 .gz 和 .br 文件以及原始捆绑包。有关如何设置的更多详细信息，请参阅文档。

但是，压缩并不局限于 Gzip 和 Brotli。事实上，它是 Parcel 插件系统中的一个全新的插件类型，它在构建过程的最后运行，同时写入最终文件。您可以编写自己的 Compressor 插件，以您喜欢的任何方式压缩或编码输出捆绑包。压缩器与 Optimizer 插件不同，因为它们不会影响最终的内容哈希，并且您可以拥有多个压缩器以同时生成同一捆绑包的多个版本。

范围提升诊断

您是否曾经想知道为什么树摇动没有按预期工作？您的代码（或库）中的某些内容是否发生了变化，并且您的捆绑包大小突然变大了？现在 Parcel 可以告诉您何时退出，以及是什么导致了退出。只需使用 --log-level verbose CLI 选项运行 Parcel 进行调试，您将在终端中看到详细的信息。每个退出都链接到文档中的相应部分，其中包含更多信息。

a screenshot of scope hoisting diagnostics

Babel 预设警告

如果您要升级使用 Babel 的现有项目，您可能会看到类似这样的警告

a screenshot of babel preset diagnostics

默认情况下，Parcel 使用 SWC 来转译 JavaScript，这比 Babel 快得多。但是，如果您有一个使用 Babel 的现有项目，Parcel 仍然会获取您的 Babel 配置。这可能会不必要地减慢您的构建速度。

如果您只使用 @babel/preset-env、@babel/preset-react 和/或 @babel/preset-typescript，那么完全删除您的 Babel 配置，或者禁用 Parcel 使用它，可以显着提高您的构建性能。即使您确实有其他插件，删除默认预设并让 Parcel 自动处理转译仍然可以使您的构建速度更快。

查看文档以了解更多详细信息。

XML 转换器

在构建新的 Parcel 网站时，我们希望能够通过 RSS 来获取博客内容。然而，由于网站由 Parcel 处理，所有图片和其他静态资源的 URL 都包含内容哈希。这意味着 RSS 订阅中文章内容中的引用也需要进行处理，以便包含正确的内容哈希。

Parcel 现在有一个 XML 变换器插件，@parcel/transformer-xml，可以用来处理 RSS 和 Atom 订阅。它处理订阅中的所有 URL 引用，甚至通过完整的 Parcel HTML 管道处理嵌入的 HTML 内容，就像任何独立的 HTML 页面一样！这是一个很好的例子，展示了 Parcel 完全语言无关的插件系统的强大功能。

查看文档以了解更多信息。

新的 `npm:` 方案

在解析作为 URL 指定的依赖项时，例如在 HTML、CSS 或 JavaScript 中的 new URL() 中，"裸规范"（即不以 ./ 或 / 开头的规范）被视为相对路径。这与 JavaScript import 语句中的依赖项形成对比，后者将这些规范视为 node_modules 包。

但有时你可能想从这些地方之一引用 node_modules 中的文件。现在你可以了。在 URL 前面加上 npm: 方案，它将像 JavaScript import 语句一样被解析，而不是作为相对 URL。这在 <script> 元素、CSS url() 依赖项以及其他所有支持 URL 的地方都有效。

以下示例展示了如何直接从脚本标签引用 npm 包

<script src="npm:focus-visible"></script>

查看文档以了解更多关于 Parcel 支持的 URL 方案的信息。

感谢

Parcel 2 已经历时很长，如果没有出色的核心团队以及多年来参与的贡献者的工作，这一切都不会发生。感谢所有在 Open Collective 上赞助或捐赠的人，帮助我们认可他们的辛勤工作。

当前

校友

试试吧！

虽然我们已经开发了很长时间，但 Parcel 2 实际上才刚刚开始。我们很高兴看到你如何使用它，并且很快将推出更多功能和改进。敬请期待！