Rollup 4结合@rollup/plugin-babel与TypeScript报错：Expected ',', got ':'

问题详情 #

编译时触发以下错误：

[!] RollupError: Expected ',', got ':' (Note that you need plugins to import files that are not JavaScript)
src/index.ts (48:19)

单独使用Babel转译src/index.ts完全正常：

npx babel src/index.ts # 运行无异常

相关配置文件如下：

babel.config.json #

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "defaults"
      }
    ],
    "@babel/preset-typescript"
  ]
}

rollup.config.mjs（已内嵌Babel配置，禁用外部配置文件） #

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.esm.js',
    format: 'esm',
  },
  plugins: [
    resolve(),
    babel({
      babelrc: false,
      presets: [
        [
          '@babel/preset-env',
          {
            targets: 'defaults',
          },
        ],
        '@babel/preset-typescript',
      ],
    }),
  ],
};

tsconfig.json #

{
  "compilerOptions": {
    "target": "ESNext",
    "declaration": true,
    "declarationDir": "dist/",
    "isolatedModules": true,
    "moduleResolution": "bundler",
    "lib": ["esnext", "DOM"]
  }
}

问题原因 #

Rollup默认会先用JS解析器处理源文件，而TypeScript的类型语法（比如type Foo = { bar: string }里的冒号）在纯JS语境下属于非法语法，直接触发报错。虽然配置了@babel/preset-typescript，但Rollup的插件执行顺序或Babel的配置没让它在Rollup解析前完成TS语法处理。

解决方法 #

方法一：添加@rollup/plugin-typescript插件 #

这个插件能让Rollup正确识别TS语法，配合Babel完成转译：

1. 安装依赖：

npm install @rollup/plugin-typescript typescript --save-dev

2. 修改Rollup配置，将typescript()放在babel()之前：

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.esm.js',
    format: 'esm',
  },
  plugins: [
    resolve(),
    typescript(), // 优先处理TS语法
    babel({
      babelrc: false,
      presets: [
        [
          '@babel/preset-env',
          {
            targets: 'defaults',
          },
        ],
        '@babel/preset-typescript',
      ],
      extensions: ['.ts', '.js'], // 明确指定要处理的文件扩展名
    }),
  ],
};

方法二：调整Babel插件配置（无需额外插件） #

如果不想安装@rollup/plugin-typescript，可以通过以下配置让Babel优先处理TS文件：

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.ts',
  resolveExtensions: ['.ts', '.js'], // 让Rollup识别TS扩展名
  plugins: [
    resolve({ extensions: ['.ts', '.js'] }), // 让resolve插件处理TS文件
    babel({
      babelrc: false,
      presets: [
        [
          '@babel/preset-env',
          {
            targets: 'defaults',
          },
        ],
        '@babel/preset-typescript',
      ],
      include: 'src/**/*.ts', // 明确指定处理所有TS文件
    }),
  ],
};

额外检查 #

打开src/index.ts第48行，确认是否有特殊TS语法（比如接口、类型别名），确保插件能正确处理这些语法。

内容的提问来源于stack exchange，提问作者gremo