使用汇总并支持 JSX 为 npm 打包 Vue 组件？

Question

我正在关注关于打包 Vue 组件的 rollup guide。

我的代码包含一些 JSX 代码，无论我如何尝试汇总构建 失败

[!] (plugin commonjs) SyntaxError: Unexpected token (12:13) in /home/nt/Desktop/vue-text-highlight-v2/src/components/Hello.vue?rollup-plugin-vue=script.js
src/components/Hello.vue?rollup-plugin-vue=script.js (12:13)
10:   methods: {
11:     hello(){
12:       return <h1>Hi!</h1>
                 ^
13:     }
14:   },

我用这个最小的组件创建了一个最小的沙箱，只是为了显示用例 包含我所有的汇总依赖项

SandBox with all config and src files

或

Github repository with minimal example

Hello.vue

<template>
<span>
  {{ this.hello() }}
</span>
</template>

<script>
export default {
  name: 'Hello',
  methods: {
    hello(){
      return <h1>Hi!</h1>
    }
  },
}
</script>

<style scoped>

</style>