Highlight.js 正则表达式兼容性问题解析与解决方案

在基于 Next.js 14.1.0 的生产环境构建中，开发者使用 highlight.js 的 highlightAll() 方法时可能会遇到一个典型的正则表达式兼容性问题。该问题表现为控制台抛出 Invalid regular expression 错误，核心问题在于正则模式中的 Unicode 属性转义（\p）未被正确解析。

问题本质

错误信息中显示的正则表达式包含 \p{S} 和 \p{P} 这类 Unicode 属性转义符，这是现代 JavaScript 引擎（ES2018+）支持的特性。但在某些构建环境下，如果代码被转译工具不当处理，可能导致这些高级正则特性失效。具体表现为：

1. 开发环境正常但生产环境报错
2. 错误指向正则表达式中的 Unicode 属性转义
3. 仅在使用自动高亮功能时触发

技术背景

Unicode 属性转义（如 \p{Script=Greek}）允许正则表达式直接匹配 Unicode 字符属性。highlight.js 使用这些特性来实现精确的语法高亮，特别是对于包含特殊符号的编程语言。

解决方案

对于 Next.js 项目，可通过配置 transpilePackages 显式声明需要转译的依赖包：

// next.config.js
module.exports = {
  transpilePackages: ['highlight.js']
}

这个方案有效的根本原因是：

1. 确保 highlight.js 的代码经过与项目一致的转译流程
2. 避免构建工具对依赖包中的正则表达式进行破坏性处理
3. 保持 Unicode 正则特性的完整性

最佳实践建议

1. 对于包含高级正则特性的库，始终检查生产环境构建
2. 在 SSR 场景下，验证服务器端和客户端的正则引擎一致性
3. 考虑在项目中使用 core-js 或类似的 polyfill 来保证正则特性兼容性
4. 定期更新 highlight.js 版本以获取更好的兼容性改进

延伸思考

这类问题实际上反映了现代前端工具链中一个常见矛盾：构建优化与语言特性保留之间的平衡。开发者需要理解，构建工具对代码的优化处理有时会无意中破坏依赖特定语言特性的库功能。通过合理配置，可以在保持构建优化的同时确保关键功能的正常运行。