rollup打包vue3组件报错

Question

rollup.config.js

// /packages/button/rollup.config.js
import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'
import typescript from 'rollup-plugin-typescript'

module.exports = [
  {
    // 入口
    input: './src/packages/Button/button.ts',
    // 出口
    output: [
      {
        file: 'dist/index.js',
        // 配置打包模块化的方式 es:ESM  cjs:CommonJS
        format: 'es'
      }
    ],
    // 插件
    plugins: [
      vue({
        // 把单文件组件中的样式，插入到html中的style标签
        // css: true,
        // 把组件转换成 render 函数
        // compileTemplate: true
        target: 'browser'
      }),
      typescript(),
      // 代码压缩
      terser()
    ]
  }
]

button.ts

import Button from './button.vue'

const install = function(Vue: any): void {
  Vue.component(Button.name, Button)
}

export default {
  install
}

button.vue

<template>
  <div class="xb-button">
    <h1 class="xb-button-test">This is Button</h1>
    <h1 class="xb-button-test2">This is Button</h1>
    <ElButton>adsa</ElButton>
  </div>
</template>
<script lang="ts">
import { ElButton } from 'element-plus'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Button',
  props: {
    a: {

    }
  },
  components: {
    ElButton
  }
})

</script>

<style scoped lang="scss">

</style>

我运行rollup -c时报错

[!] Error: 'defineComponent' is not exported by node_modules/vue/index.js, imported by src/packages/Button/button.vue?vue&type=script&lang.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/packages/Button/button.vue?vue&type=script&lang.ts (3:9)
1: 
2: import { ElButton } from 'element-plus'
3: import { defineComponent } from 'vue'

我的package.json

{
  "name": "vue3-component-new",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:core": "TYPE=lib vue-cli-service build --target lib --name index --no-clean src/packages/index.ts",
    "build:test": "TYPE=lib vue-cli-service build --target wc 'src/packages/Button/*.vue'",
    "build:theme": "gulp build --gulpfile gulpfile.js",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build:rollup": "rollup -c"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^1.1.0-beta.12",
    "markdown-it": "^12.2.0",
    "markdown-it-anchor": "^8.3.1",
    "markdown-it-container": "^3.0.0",
    "markdown-it-emoji": "^2.0.0",
    "markdown-it-table-of-contents": "^0.5.2",
    "normalize.css": "^8.0.1",
    "vue": "^3.2.0",
    "vue-loader": "^16.5.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/chai": "^4.2.11",
    "@types/mocha": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.2.12",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-sass": "^5.0.0",
    "hyperdown": "^2.4.28",
    "node-sass": "^4.12.0",
    "prismjs": "^1.25.0",
    "rollup": "^2.57.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript": "^1.0.1",
    "rollup-plugin-vue": "^6.0.0",
    "sass": "^1.41.1",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.13.1",
    "stylelint-config-property-sort-order-smacss": "^7.1.0",
    "stylelint-config-recommended": "^5.0.0",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-scss": "^3.21.0",
    "typescript": "~4.1.5"
  }
}

Answer 1

估计是少了插件 @rollup/plugin-node-resolve