javascript - (插件 commonjs) SyntaxError : Unexpected token when packaging vue component with rollup

Question

用 rollup 打包一个 Vue 组件时，会出现这个错误:
(plugin commonjs) SyntaxError: Unexpected token

rollup.config.js:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";
import {babel} from '@rollup/plugin-babel';

import packageJson from "./package.json";

export default {
    input: "src/index.ts",
    output: [
        {
            format: "cjs",
            file: packageJson.main,
            sourcemap: true
        },
        {
            format: "esm",
            file: packageJson.module,
            sourcemap: true
        }
    ],
    plugins: [babel(), peerDepsExternal(), resolve(), commonjs(), typescript(), vue()]
};

按钮.vue:

<template>
  <button>button</button>
</template>
<script lang="ts">
</script>

有什么解决办法吗？
于是我找到了更好的办法:
最好使用vue-sfc-rollup打包 Vue 组件。

Answer 1

我有这样的问题。对 <template> 中的任何 html 标签发誓.

plugins: [
  vue() //should be the first
  babel(),
  peerDepsExternal(),
  resolve(),
  commonjs(),
  typescript(),
],

观看 issue .