Rollup打包Vue组件库报Unexpected token错误如何解决？

核心原因 #

你当前的Rollup插件执行顺序配置错误：@rollup/plugin-typescript 会先于 rollup-plugin-vue 执行，此时Vue单文件还未被解析提取script代码块，TypeScript插件无法识别.vue文件内容，自然会报类型语法的意外token错误。

具体修改步骤 #

1. 调整插件执行顺序
   Rollup插件执行顺序为从上到下，需要先通过rollup-plugin-vue提取Vue单文件组件中的script代码块，再交由TypeScript插件处理语法，因此要把vue()放在typescript()前面。
2. 开启TypeScript对TSX语法的支持
   你在组件中使用了lang="tsx"的脚本，需要在TypeScript插件配置中开启TSX支持，同时建议在项目根目录的tsconfig.json中同步配置JSX相关规则。
3. 补充必要的类型识别配置
   确保tsconfig.json的include字段覆盖了.vue、.tsx等后缀的文件，同时安装了@vue/runtime-dom、vue-tsc等必要的类型依赖，保证TypeScript可以识别Vue单文件组件的类型。

修改后的rollup.config.js参考 #

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

export default {
  input: "src/index.ts",
  output: {
    name: "Button",
    exports: "named"
  },
  plugins: [
    vue({
      css: true, 
      compileTemplate: true 
    }),
    typescript({
      jsx: 'preserve', // 适配TSX语法
      tsconfig: './tsconfig.json' // 关联你的TS配置文件
    }),
    commonjs()
  ]
};

tsconfig.json参考配置（如果缺失可补充） #

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "preserve",
    "moduleResolution": "Node",
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

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