“Nuxt 拒絕識別我的自訂 Vue (vuecli) 元件庫，並顯示錯誤訊息‘找不到模組的聲明文件’”

Question

我使用本教學製作的 VueCLI 專案建立了一個小型 Vue 元件庫： https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00

元件庫

VueCLI 專案是使用 Typescript 設定的，因此附帶了幾個 *.d.ts 檔案：

// shims-tsx.d.ts
import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

我的index.ts檔案是我匯出所有內容的地方

import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...

export {
  ATag,
  AnotherThing,
  ...
};

和我的 package.json 檔案：

{
  "name": "my-ui-components",
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-ui-components ./src/index.ts",
  },
  "main": "./dist/my-ui-components.common.js",
  "files": [
    "dist/*"
  ]
}

建置腳本會產生幾個 JS 檔案、一個 CSS 檔案和一個用於打包圖片的資料夾。

我的 Nuxt 專案只是一個樣板項目，我透過 ssh 從我們的位元儲存桶帳戶匯入元件庫：

"dependencies": {
  "my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}

無論我嘗試導入我的元件（下游，在我的 Nuxt 應用程式中），如下所示：

pages/Index.vue

#

<script>
import { ATag, AnotherThing } from my-ui-components;
export default {
...
components: {
ATag,
}
...
}
</script>

我收到此錯誤：

找不到隱式具有「any」類型的模組「my-ui-components」的宣告檔

「ATag.vue」確實沒什麼特別的：

<template>
  <span :class="classes"><slot /></span>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'a-tag',
  props: {
    type: {
      type: String,
      validator(value) {
        return ['is-primary', 'is-success', 'is-warning', 'is-danger'].includes(value);
      },
    },
    shade: {
      type: String,
      validator(value) {
        return ['is-light', 'is-normal'].includes(value);
      },
    },
    size: {
      type: String,
      default: 'is-normal',
      validator(value) {
        return ['is-normal', 'is-medium', 'is-large'].includes(value);
      },
    },
    rounded: {
      type: Boolean,
      default: false,
    },
    naked: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classes() : object {
      return {
        tag: true,
        [`${this.type}`]: this.type,
        [`${this.shade}`]: this.shade,
        [`${this.size}`]: this.size,
        'is-rounded': this.rounded,
        'is-naked': this.naked,
      };
    },
  },
});
</script>

那麼我錯過了什麼？這將是我第一次體驗打字稿，所以我不知道其中的細節。

我認為上游（ui-components 函式庫）聲明檔案沒有在建置過程中使用，或其 Nuxt 有問題。

Answer 1

我認為這是因為你的匯出方式。通常我在index.ts中編寫導出語句如下

export ATag from './components/ATag.vue';
export AnotherThing from './components/AnotherThing.vue';