vue.js - 使用汇总和支持 JSX 为 npm 打包 Vue 组件？

Question

我正在关注打包 Vue 组件的汇总指南。

我的代码包含一些 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:   },

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

包含所有配置和 src 文件的沙盒

或者

带有最小示例的 Github 存储库

你好.vue

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

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

<style scoped>

</style>

标签： vue.jsjsxbundlebundlerrollup