為什么我在使用 vue-sfc-rollup 構建的 Vue 2 組件庫中使用 Vue 2 Composition API 時會出錯？

Question

我正在使用vue-sfc-rollup構建組件庫。 該庫以 Vue 2 為目標，但使用Vue 2 組合 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,
  }
})

但是，當我在瀏覽器中運行它時，出現以下錯誤。

data() 中的錯誤：“TypeError：無法讀取 null 的屬性 'config'”

從main.ts中刪除Vue.use(VueCompositionApi)可以消除錯誤，但不會加載組件。 所以看來問題是我的組件沒有正確注冊組合 API 的存在。

Answer 1

問題是需要告訴匯總庫具有外部依賴項。

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

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

然后只需構建，發布到 npm，npm 更新使用包的項目中的包，它應該可以正常工作。

感謝Github 上的這篇文章，它引導我使用external配置和這個示例rollup.config.js ，指向該文章的鏈接准確地顯示了它應該去的地方。