Bagaimanakah saya boleh mencipta perpustakaan yang mendedahkan satu komponen Vue yang boleh digunakan oleh fail .mjs yang diedarkan?

Question

Saya mahu mencipta komponen Vue yang digabungkan ke dalam satu fail .mjs. Projek Vue lain boleh mendapatkan fail .mjs ini melalui HTTP dan menggunakan komponen tersebut. Memasang komponen boleh pasang melalui npm tidak mungkin kerana aplikasi lain akan cuba mendapatkannya berdasarkan konfigurasi semasa masa jalan.

Perkara yang perlu dipertimbangkan dengan komponen boleh pasang

• Mungkin menggunakan subkomponen daripada rangka kerja/pustaka UI lain
• Boleh menggunakan CSS tersuai
• Mungkin bergantung pada fail lain, seperti imej

---

Salin Perpustakaan

Saya mencipta projek Vuetify baharu melalui npm create vuetify

Saya memadamkan semua dalam folder src kecuali vite-env.d.ts dan mencipta komponen Renderer.vue

<script setup lang="ts">
import { VContainer } daripada "vuetify/components"

defineProps<{ nilai: tidak diketahui }>()
</skrip>

<template>
  <v-bekas>
    <span class="red-text">Nilai ialah: {{ JSON.stringify(value, null, 2) }}</span>
  </v-bekas>
</template>

<gaya>
.red-text { color: red }
</style>

dan fail index.ts

import Renderer daripada "./Renderer.vue";

eksport { Renderer };

Saya menambah mod perpustakaan dalam vite.config.ts

bina: {
    lib: {
      entri: selesaikan(__dirname, "./src/index.ts"),
      nama: "Penyampai",
      Nama fail: "penyampai",
    },
    rollupOptions: {
      luaran: ["vue"],
      pengeluaran: {
        global: {
          vue: "Vue",
        },
      },
    },
  },

dan memanjangkan fail package.json

"fail": ["dist"],
  "utama": "./dist/renderer.umd.cjs",
  "modul": "./dist/renderer.js",
  "eksport": {
    ".": {
      "import": "./dist/renderer.js",
      "memerlukan": "./dist/renderer.umd.cjs"
    }
  },

Memandangkan saya menggunakan CSS tersuai, Vite menghasilkan fail styles.css, tetapi saya perlu menyuntik gaya ke dalam fail .mjs. Berdasarkan soalan ini, saya menggunakan plugin vite-plugin-css-injected-by-js.

Apabila membina, saya mendapat fail .mjs yang diperlukan yang mengandungi CSS tersuai

---

Menggunakan komponen

Saya mencipta projek Vue baharu melalui npm create vue

Untuk tujuan ujian, saya menyalin fail .mjs yang dijana terus ke dalam direktori src projek baharu dan menukar fail App.vue kepada

<script setup lang="ts">
import { onMounted, type Ref, ref } dari "vue";

const ComponentToConsume: Ref = ref(null);

onMounted(async () => {
  cuba {
    const { Renderer } = tunggu import("./renderer.mjs"); // ambil komponen semasa masa jalan

    ComponentToConsume.value = Renderer;
  } tangkap (e) {
    console.log(e);
  } akhirnya {
    console.log("selesai...");
  }
});
</skrip>

<template>
  <div>Komponen yang diimport di bawah:</div>
  <div v-if="ComponentToConsume === null">"masih dimuatkan..."</div>
  <komponen-untuk-dimakan v-else :value="123"
</template>

Malangnya, saya mendapat amaran dan ralat berikut

[Vue warn]: Vue menerima komponen yang telah menjadi objek reaktif. Ini boleh menyebabkan prestasi yang tidak diperlukan dan harus dielakkan dengan menandakan komponen dengan markRaw atau menggunakan shallowRef dan bukannya ref.

[Vue warn]: Suntikan 'Symbol(vuetify:defaults)' tidak ditemui.

[Vue warn]: Ralat tidak terurus berlaku semasa pelaksanaan fungsi persediaan

[Vue warn]: Ralat tidak terurus berlaku semasa melaksanakan muat semula penjadual.

Tidak ditangkap (dalam janji) Ralat: [Vuetify] Contoh lalai tidak ditemui

Adakah sesiapa tahu apa yang saya hilang atau bagaimana untuk membetulkannya?

Answer 1

Vuetify tidak menyediakan komponen terpencil, pemalam perlu dimulakan, anda perlu melakukan ini dalam apl utama:

app.use(Vuetify)

Pastikan vuetify tidak diduplikasi dalam deps projek supaya perpustakaan dan aplikasi utama menggunakan salinan yang sama.

lib harus menggunakan vuetify作为开发依赖，并在Rollup external sebagai kebergantungan pembangunan dan menyatakannya dalam Rollup luaran untuk mengelakkan barangan global projek daripada digabungkan dengan lib:

external: ["vue", "vuetify"]