Svelte组件Rollup构建报错：Type类型导入出现意外令牌

问题根源 #

rollup-plugin-svelte默认无法解析TypeScript专属的import type语法，因为它没有内置TypeScript预处理器，遇到这类TS语法时会直接抛出解析错误；同时当前Rollup插件顺序也未让TypeScript处理器正确处理Svelte组件内的TS代码。

解决方案步骤 #

1. 安装Svelte TypeScript预处理器 #

首先安装svelte-preprocess，它能让Svelte组件支持TypeScript语法解析：

npm install --save-dev svelte-preprocess

2. 修改Rollup配置文件 #

更新rollup.config.js，做两处关键调整：

• 引入svelte-preprocess并配置给svelte插件
• 调整插件顺序，确保typescript插件在svelte插件之后执行（让Svelte先处理组件内的TS代码，再由TS插件处理全局TS文件）
• 修正原配置中format: "en"的笔误，改为标准的"es"格式

修改后的配置如下：

import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import json from "@rollup/plugin-json";
import preprocess from "svelte-preprocess";

const pkg = require("./package.json");

export default {
  input: "src/index.tsx",
  output: [
    { file: pkg.module, format: "es" },
    { file: pkg.main, format: "umd", name: "Name" },
  ],
  plugins: [
    json({ compact: true }),
    peerDepsExternal(),
    resolve(),
    svelte({
      preprocess: preprocess({
        typescript: true,
      }),
      extensions: ['.svelte', '.ts', '.tsx']
    }),
    typescript({ useTsconfigDeclarationDir: false }),
    postcss({
      extensions: [".css"],
    }),
  ],
};

3. 优化TSConfig配置 #

确保tsconfig.json符合Svelte的TypeScript规范，补充types字段提升类型支持：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["svelte"]
  },
  "importsNotUsedAsValues": "remove"
}

4. 验证组件中的Type导入 #

确保Svelte组件的<script>标签添加lang="ts"标识，让预处理器识别并处理其中的TS代码：

<script lang="ts">
import type { Point } from './../typings/Point';

let point: Point = { x: 0, y: 0 };
</script>

关键说明 #

• svelte-preprocess会自动识别带lang="ts"的<script>标签，将TS代码转译为JS，让rollup-plugin-svelte能正确解析。
• 插件顺序直接影响编译流程：svelte插件需先处理组件文件，再由typescript插件处理剩余TS模块，避免类型语法未转换就被Svelte插件解析。

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