为什么在用vue-sfc-rollup构建的Vue 2组件库中使用Vue 2 Composition API会报错？

Question

我正在使用 vue-sfc-rollup. The library targets Vue 2 but uses the Vue 2 Composition API 构建一个组件库，以便在时机成熟时更容易移植到 Vue 3。

将库发布到 npm 后，我使用 Vue CLI 创建了一个空白的 Vue 2 项目（针对启用了 TypeScript 的 Vue 2）。

npm install <my_package>
npm install @vue/composition-api

在 main.ts 中，我安装了 Composition API 作为插件。

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

然后，在 App.vue 我从我的库中导入了一个组件进行测试。

import { MyComponent } from '@mypackage/components'

export default Vue.extend({
  components: {
    MyComponent,
  }
})

但是，当我 运行 在浏览器中执行此操作时，出现以下错误。

Error in data(): "TypeError: Cannot read property 'config' of null"

从 main.ts 中删除 Vue.use(VueCompositionApi) 可以消除错误，但组件不会加载。所以看来问题是我的组件没有正确注册 Composition API 存在。

Answer 1

问题是需要告知 rollup 该库具有外部依赖性。

在 build/rollup.config.js 中搜索 const external 并将 @vue/composition-api 添加到列表中。

const external = [
  'vue',
  '@vue/composition-api',  // <-- add this!
]

然后构建，发布到 npm，npm 更新项目中的包使用包，它应该可以正常工作。

感谢 this post on Github 引导我使用 external 配置和 this example rollup.config.js post 链接显示了它应该去的地方。