Rollup 打包 ES2024 代码报错缺少 transform 怎么处理？

Rollup 默认不转译代码，报错缺少 transform 通常是因为未配置转译插件或插件不支持 ES2024 语法。最推荐处理方向是安装 @rollup/plugin-babel 或 rollup-plugin-esbuild 并更新到最新版本，风险边界在于部分 ES2024 特性可能需要特定 Babel 插件支持。

先说结论：Rollup 本身不处理语法转换，必须通过插件显式配置 transform 步骤才能支持 ES2024 新特性。

先确认：检查报错是否指向新语法特性（如 RegExp v 标志、数组分组）且未命中 include 规则。
先处理：安装转译插件并在 rollup.config.js 中指定 target 或 preset-env。
再验证：重新构建后检查输出文件是否已降级为兼容语法且无报错。

命令速用版

如果项目允许使用 esbuild，这是处理新语法最快的方式；若需精细控制，使用 Babel。

# 方案 A：使用 esbuild（速度快，支持大部分新语法）
npm install `--save-dev` rollup-plugin-esbuild

# 方案 B：使用 Babel（兼容性好，配置灵活）
npm install `--save-dev` @rollup/plugin-babel @babel/core @babel/preset-env

为什么会这样

Rollup 的核心定位是模块打包器，默认假设输入代码已经是目标环境可执行的语法。ES2024 包含尚未被所有运行时原生支持的特性，Rollup 内部解析器无法识别时会抛出语法错误，或者在后续压缩阶段报错。必须引入 transform 插件将新语法转换为旧语法，这个过程称为转译（Transpilation）。

分步处理

按照以下步骤配置转译插件，确保 ES2024 代码被正确处理。

步骤 1：安装插件
根据项目需求选择 esbuild 或 Babel。esbuild 配置更简单，Babel 生态更丰富。执行上述“命令速用版”中的安装命令。

步骤 2：修改配置文件
在 rollup.config.js 中引入插件并添加到 plugins 数组。确保 include 规则覆盖源代码目录。

// 示例：使用 @rollup/plugin-babel
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: { dir: 'dist', format: 'cjs' },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: [
        ['@babel/preset-env', {
          targets: { node: 'current' } // 或指定具体浏览器版本
        }]
      ],
      extensions: ['.js', '.jsx', '.ts', '.tsx'] // 确保包含所有源文件扩展名
    })
  ]
};

步骤 3：调整目标环境
如果 ES2024 特性非常新，确保 @babel/preset-env 或 esbuild 的 target 设置不会强制降级不支持的特性，或者确认运行时环境已支持。若需兼容旧环境，需确认 Babel 插件是否已支持该特性。

怎么验证是否生效

构建完成后，通过检查输出文件和构建日志确认转换是否成功。

检查点 1：构建日志
运行构建命令，观察终端是否有 ERROR 或 Warning 关于语法解析的提示。成功构建通常只显示打包统计信息。

检查点 2：输出代码
打开 dist 目录下的生成文件，搜索 ES2024 特有语法（如 Array.prototype.group 或新正则标志）。如果代码已被转换为兼容写法（如 polyfill 或等效逻辑），说明 transform 生效。

# 快速查看构建结果
npm run build
ls dist/

常见坑

配置过程中容易忽略以下细节，导致报错依旧或运行时错误。

插件顺序错误：转译插件应放在解析插件之后、压缩插件之前。如果在 Terser 之后转译，压缩器会因无法识别新语法而报错。
node_modules 未排除：默认情况下不应转译 node_modules 中的依赖，除非明确知道某个依赖需要转换。在 Babel 配置中注意 exclude: 'node_modules/**'。
Node 版本过低：本地构建环境的 Node.js 版本如果过旧，可能无法解析 ES2024 语法，导致构建脚本本身报错。建议升级 Node 至 LTS 最新版本。
特性支持滞后：部分 ES2024 特性在 Babel 或 esbuild 中可能尚未完全实现。公开资料中没有看到可靠的量化数据说明所有特性均已支持，遇到特定语法报错时需查阅插件 Changelog。

常见问题

Rollup 自带转译功能吗？

不自带。Rollup 仅负责模块合并，语法转换必须依赖外部插件如 Babel 或 esbuild。

esbuild 和 Babel 选哪个支持 ES2024 更好？

esbuild 更新速度快且配置简单，适合大多数新语法；Babel 插件生态更成熟，适合需要精细控制兼容性的场景。

配置了插件还是报错 Unexpected token 怎么办？

检查文件扩展名是否包含在插件的 extensions 配置中，并确认该 ES2024 特性是否已被底层转译器支持。

参考来源

Rollup 官方文档 - Plugins: https://rollupjs.org/
@rollup/plugin-babel 使用说明：https://github.com/rollup/plugins/tree/master/packages/babel
esbuild 官方文档 - Supported Features: https://esbuild.github.io/