Rollup+TypeScript构建失败：import type语法报错求助

问题概述 #

在入口文件src/index.ts中使用import type { num } from 'types/index'导入自定义类型，执行rollup --config命令时触发RollupError：Unexpected token。尝试改为错误的import { type } from 'types/index'仍报错，仅直接在文件内定义type num = number时构建正常。需解决该问题，使Rollup能正常处理原有代码。

报错信息 #

初始导入语法报错 #

src/index.ts → dist/index.js...
[!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.ts (1:12)
1: import type { num } from "../types/index";
               ^

修改导入语法后的报错 #

src/index.ts → dist/index.js...
[!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.ts (4:29)
2: import flex from "./log";
3: 
4: export default function add(x: num, y: num) {
                                ^

文件内容 #

src/index.ts #

import { num } from "../types/index";
import flex from "./log";

export default function add(x: num, y: num) {
  flex();
  return x + y;
}

src/log.ts #

export default function flex() {
  console.log("This is too simple");
}

types/index.ts #

export type num = number;

配置文件 #

tsconfig.json #

{
  /* Read more via https://aka.ms/tsconfig */
  "extends": "@tsconfig/recommended/tsconfig",
  "compilerOptions": {
    /** same directory as rollup output */
    "outDir": "dist",
    /** generate declarations right next to the output */
    "declaration": true,
    "baseUrl": "./",
    "paths": {
      "src": ["src"],
      "types": ["types"]
    }
  },
  "include": ["src/**/*.ts"]
}

rollup.config.js #

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "es",
  },
  plugins: [typescript()],
};

package.json依赖 #

{
  ...
  "type": "module",
  "devDependencies": {
    "@rollup/plugin-typescript": "^11.1.2",
    "@tsconfig/recommended": "^1.0.2",
    "@types/babel__core": "^7.20.1",
    "rollup": "^3.25.3",
    "tslib": "^2.6.0",
    "typescript": "^5.1.6"
  }
}

环境信息 #

• 平台：WSL2(ubuntu)
• NodeJS：18.16.0

解决方案 #

1. 修正TypeScript配置的文件范围 #

types/index.ts未被包含在tsconfig.json的include列表中，导致TypeScript无法识别该类型文件。更新include字段：

"include": ["src/**/*.ts", "types/**/*.ts"]

2. 使用正确的类型导入语法 #

num是TypeScript类型而非值，必须用import type语法导入。修改src/index.ts的导入语句：

import type { num } from '../types/index';

3. 让Rollup插件明确读取tsconfig #

在rollup.config.js中给@rollup/plugin-typescript指定tsconfig路径，确保插件使用项目的TypeScript配置：

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "es",
  },
  plugins: [
    typescript({
      tsconfig: "./tsconfig.json"
    })
  ],
};

4. （可选）支持路径别名导入 #

若要使用import type { num } from 'types/index'（基于tsconfig的paths别名），需安装@rollup/plugin-alias来解析别名：

1. 安装依赖：

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

2. 修改rollup.config.js：

import typescript from "@rollup/plugin-typescript";
import alias from '@rollup/plugin-alias';

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "es",
  },
  plugins: [
    alias({
      entries: [
        { find: 'types', replacement: './types' }
      ]
    }),
    typescript({
      tsconfig: "./tsconfig.json"
    })
  ],
};

完成以上修改后，执行rollup --config即可正常构建。

内容的提问来源于stack exchange，提问作者候泽空