Parcel v2.6.0
我们很高兴地宣布 Parcel v2.6.0！这个版本包括新功能，包括 React 的错误覆盖层、HMR 中的源映射支持、CSS 模块中的局部作用域变量，以及大量的错误修复和改进。
React 错误覆盖层
#Parcel 长期以来一直包括用于构建错误的浏览器内覆盖层，但当发生运行时错误时，它只会记录到控制台。正如 Create React App 所推广的那样，Parcel 现在还包括 React 的运行时错误覆盖层，它显示带有突出显示的代码帧的漂亮堆栈跟踪，并自动省略 React 框架内部。
这些代码帧使用源映射显示您的原始代码，但您也可以切换以显示编译后的输出，或展开折叠的框架内部堆栈帧。这些都由 Create React App 使用的相同包提供。感谢 CRA 团队为错误构建了如此出色的用户界面！
直接从错误启动编辑器
#React 运行时错误覆盖层和 Parcel 的构建错误覆盖层现在都支持在代码帧中单击文件名或行号，直接跳转到代码编辑器中的该行！Parcel 自动从超过 15 个支持的编辑器列表中检测您正在使用的编辑器，基于已运行或已安装的进程。这使得在浏览器调试和编辑器中的相应代码之间跳转变得非常容易。
HMR 源映射
#Parcel 长期以来一直支持 HMR 和源映射，但由于 HMR 的实现方式，它们无法一起工作。现在，它们可以了！这意味着在对代码进行更改并且不重新加载浏览器的情况下，错误堆栈跟踪和控制台日志现在显示源代码的正确行和列，而不是编译后的输出。这使调试变得更加容易！
作为背景，Parcel 使用 Web Socket 实现 HMR 更新，接收您更新的任何文件的编译代码。以前，这段代码是使用 new Function() 进行评估的，这允许我们以非常快的方式就地更新模块，而无需重新加载整个脚本标签。不幸的是，浏览器对此 API 中的源映射支持不佳。现在默认情况下我们使用 eval，它在 Chrome 和 Firefox 中支持源映射。然而，Safari 仍然不支持 eval 中的源映射，因此我们现在有一个从开发服务器通过 HTTP 加载 <script> 标签的回退方案。作为一个附带好处，如果您有一个在开发中拒绝 eval 的内容安全策略，我们也将自动回退到通过 HTTP 加载。这应该无缝工作，只是比 eval 路径稍慢一些。
CSS 模块中的局部作用域变量
#CSS 模块允许您在 CSS 文件中局部作用域标识符，如类名、ID 选择器、@keyframes 等，以便它们不会与其他文件中的标识符冲突。然而，直到现在，这并不包括 CSS 变量和其他带连字符的标识符（例如 --foo）。这意味着即使使用 CSS 模块，一个文件中定义的变量名也可能与另一个文件中的变量冲突。
Parcel 现在提供了一种可选的方式来局部作用域 CSS 变量和其他带连字符的标识符（例如 @font-palette-values）。启用后，Parcel 将重命名 CSS 变量以包含其所在文件名的哈希，以便它们不会与其他文件冲突。如果确实需要引用在另一个文件中定义的变量，有一个新的 CSS 语法扩展可以这样做：
.button {
background: var(--accent-color from "./vars.module.css");
}显式声明文件之间的依赖关系还启用了另一个很酷的功能：Parcel 现在可以树摇未使用的 CSS 变量！就像 JavaScript 树摇一样，Parcel 跟踪每个文件中使用的 CSS 类、ID、@keyframes，现在还有变量，并自动删除未使用的声明。这只有在 CSS 模块中才是可能的，因为符号是局部声明和引用的，而不是全局的。对于设计系统和其他有大量 CSS 变量的库来说，这可能是一个非常有用的功能，因为应用程序中可能只使用了可用组件中的一些。
查看更新的文档以了解更多关于此功能的信息。
自定义 CSS 模块命名模式
#Parcel 现在还支持在编译 CSS 模块时配置使用的命名模式。默认情况下，Parcel 使用定义它的文件名的哈希作为每个类名的前缀。现在，您可以通过在 package.json 中配置 @parcel/transformer-css 来定义自定义命名模式。
{
"@parcel/transformer-css": {
"cssModules": {
"pattern": "my-company-[name]-[hash]-[local]"
}
}
}查看文档以了解更多。
npm 包中的通配符
#@parcel/resolver-glob 插件允许您使用通配符规范一次导入多个文件。以前，它只支持项目中的本地文件，但现在您也可以从 npm 包导入通配符。
import * as locales from "@company/pkg/i18n/*.js";
console.log(locales.en.message);请参阅文档了解更多详情。
还有更多！
#Parcel v2.6.0 包括许多其他较小的功能、错误修复和改进，包括对 Vue 的 compilerOptions 和 <script setup> 的支持、更多图像格式的支持、SWC 更新、改进的 Elm 错误消息等。查看完整的发行说明以获取更多详细信息。