宣布 Parcel v2！

Parcel 团队非常兴奋地宣布 v2.0.0 稳定版现已可用！🎉

Parcel 2 带来了你在 Parcel 1 中熟悉的零配置体验，并使其能够扩展到任何规模和复杂度的项目。 它已经在行业中一些最大的公司（包括 Atlassian、Adobe 和 Microsoft）的生产环境中使用。

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

Parcel 2 有什么新特性？

#

Parcel 2 是对 Parcel 的彻底重写，涉及到每个方面。如果你没有关注我们的预发布博客文章，以下是一些亮点。

查看迁移指南，了解如何将现有项目从 Parcel 1 升级到 Parcel 2。对于许多项目来说，只需在 package.json 中更新依赖项就可以了！

如果你正在开始一个新项目，我们有网页应用和库的入门指南，以及 Parcel 所有功能的完整文档，包括 Parcel 支持的所有语言和框架。

最后，查看我们炫酷的新主页，了解 Parcel 2 的所有功能！🥳

为什么选择 Parcel？

#

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

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

Parcel 是为 Web 设计的，不仅仅是 JavaScript。 大多数 Parcel 项目从 HTML 文件开始，然后像 Web 浏览器一样跟踪整个应用程序中的所有依赖。这包括 JavaScript、CSS、SVG、图像、字体、视频、WebGL 着色器、RSS 源等等。原生 Web API（如 Web Worker、服务工作者和 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 版本以来的新内容

#

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

一流的 SVG 支持

#

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

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

SVG 可以从 HTML、CSS、JavaScript 或其他任何地方作为外部文件引用，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 自动完成，但有时你需要提前上传预压缩的包。这也可能允许更好的压缩，这在每个网络请求上进行会太慢。

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

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

作用域提升诊断

#

你是否曾经想知道为什么树摇不像预期那样工作？代码中（或库中）的某些内容是否改变并突然导致你的包大小变大？现在 Parcel 可以告诉你它何时退出，以及导致退出的确切原因。只需使用 --log-level verbose CLI 选项运行 Parcel 进行调试，你将在终端中看到详细信息。每个退出都链接到文档中的相应部分，提供更多信息。

作用域提升诊断的屏幕截图

Babel 预设警告

#

如果你正在升级一个使用 Babel 的现有项目，你可能会看到如下警告：

Babel 预设诊断的屏幕截图

默认情况下，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 实际上刚刚起步。我们很高兴看到你如何使用它，并且即将推出更多功能和改进。敬请期待！