Parcel v2.12.0

Parcel v2.12.0 引入了宏支持，使您能够使用常规 JavaScript 函数在构建时生成代码。它还包括一个新的在线 REPL，改进了 CSS 捆绑支持，添加了配置选项以微调应用的代码拆分，并提高了性能和内存使用。

宏

Parcel v2.12.0 引入了宏支持。最初在 Bun 中实现，宏是在构建时运行而不是被捆绑的 JavaScript 函数。宏返回的值将内联到捆绑包中，替换原始函数调用。这使您可以生成常量、代码，甚至额外的资源，而无需任何自定义插件。

使用导入属性导入宏，以指示它们应在构建时运行而不是被捆绑到输出中。您可以导入任何 JavaScript 或 TypeScript 模块作为宏，包括内置 Node 模块和 npm 包。

此示例使用 regexgen 库在构建时从一组字符串生成优化的正则表达式。

import regexgen from 'regexgen' with {type: 'macro'};

const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);
console.log(regex);

这编译为以下捆绑包：

console.log(/foo(?:zap?|ba[rz])/);

如您所见，regexgen 库已完全被编译掉，留下了一个静态正则表达式！

Parcel 的宏实现还使您能够在构建时生成函数，甚至发出新资源。例如，宏可以生成 CSS，这将被静态提取到 CSS 捆绑包中，就像它是从 JS 文件导入的一样。

此示例接受一个 CSS 字符串并返回生成的类名。CSS 被添加为资源并捆绑到 CSS 文件中，JavaScript 捆绑包仅包含作为静态字符串的生成类名。

import {css} from './css.ts' with {type: 'macro'};

<div className={css('color: red; &:hover { color: green }')}>
  Hello!
</div>

import type { MacroContext } from "@parcel/macros";

export async function css(this: MacroContext | void, code: string) {
  let className = hash(code);
  code = `.${className} { ${code} }`;

  this?.addAsset({
    type: "css",
    content: code,
  });

  return className;
}

上述示例的捆绑输出将如下所示：

<div className="ax63jk4">Hello!</div>

.ax63jk4 {
  color: red;
  &:hover {
    color: green;
  }
}

这基本上是一个仅用几行代码实现的具有构建时静态提取的 CSS-in-JS 库！由于宏只是常规的 JavaScript 或 TypeScript 函数，您可以在其上创建任何您想要的 API，例如使用对象 API 或主题值生成 CSS。我们很高兴看到这将解锁什么创新 - 对于 CSS-in-JS 和更多方面。查看文档以了解更多。

REPL

Parcel 现在有了一个 REPL，您可以直接在浏览器中尝试！Niklas Mischkulnig 多年来一直在开发 REPL，我们很高兴它最终集成到了我们的网站中。REPL 具有完整的代码编辑器、文件浏览器，并支持大多数 Parcel 功能，包括监视模式、开发服务器、热模块替换等。

在底层，REPL 由尖端的 Web 技术提供支持，包括 Web Assembly、用于托管开发服务器的服务工作者、用于多核处理的 Web Worker 后端，以及用于包管理器缓存的 IndexedDB。它甚至可以通过在浏览器中运行编译版本的 Yarn 来从 npm 安装包。

REPL 非常适合尝试 Parcel 并查看事物是如何编译的。它还非常适合创建可共享的错误重现。快来看看！

Lightning CSS 支持的捆绑

Parcel 已经默认使用 Lightning CSS 转换 CSS 文件有一段时间了。现在 Parcel 也使用它来捆绑 CSS 文件。这带来了对现代 CSS 功能的支持，如带有级联层的 @import，改进了带媒体和支持查询的导入支持，以及对复杂 CSS 排序问题的更正确处理。

手动共享捆绑包

默认情况下，Parcel 会自动代码拆分您的代码以实现最大的缓存效率。应用程序多个部分之间共享的常见模块被提取到共享捆绑包中，以便浏览器可以单独加载和缓存。但有时，您可能比 Parcel 更了解应用程序某个部分应该如何加载，选择提前过度获取以优化后续操作。在此版本中，我们引入了手动共享捆绑包支持来解决这个问题。

手动共享捆绑包允许您配置 Parcel 以确保某些模块无论使用位置如何都始终捆绑在一起。例如，您可以创建一个加载一组常用库的供应商捆绑包，或将特定路由的资源分组到单个捆绑包中。这是使用通配符来匹配文件路径指定的，以及额外的选项，可以按根资源或类型分组，拆分为多个并行 HTTP 请求等。查看文档以了解所有详细信息。

手动共享捆绑包最好在尝试 Parcel 的默认捆绑算法并进行真实世界的性能测试后应用。当您遇到无法通过更改代码结构解决的特定性能问题时，使用手动共享捆绑包来覆盖 Parcel 的默认行为。手动共享捆绑包在从 webpack 等其他捆绑器移植代码时也很有用。

性能改进

与大多数 Parcel 版本一样，v2.12.0 还包括一些性能改进。在此版本中，我们改进了核心图数据结构，将内存使用量减少了约 52%，并将写入性能提高了约 5%。对于一个真实的、非常大的应用，这相当于内存使用量减少了约 800MB，且启动、构建和关闭时间没有倒退！如果您有兴趣了解我们是如何进行这些优化的，请查看拉取请求。关于我们由 SharedArrayBuffer 支持的自定义图数据结构的更多背景，我们现在有一些文档。

在此版本中，我们还改进了 Parcel 将图存储到磁盘的方式，使其在开发过程中的空闲时间以小块的形式工作，而不是在图序列化时阻止进程关闭。我们现在不再一次性序列化整个图，而是跟踪已修改的部分并仅重新序列化这些部分。这应该会改善非常大型项目中 Parcel 的感知关闭性能。

感谢！

感谢所有为此版本做出贡献的人！查看完整的更新日志以了解所有其他错误修复和改进。

• GitHub
• Discord 社区
• 在 Open Collective 上支持我们