分散された .mjs ファイルで使用できる単一の Vue コンポーネントを公開するライブラリを作成するにはどうすればよいですか?

Question

<p>単一の .mjs ファイルにバンドルされた Vue コンポーネントを作成したいと考えています。別の Vue プロジェクトは、HTTP 経由でこの .mjs ファイルを取得し、コンポーネントを使用できます。他のアプリケーションが実行時の構成に基づいてコンポーネントを取得しようとするため、npm 経由でプラグ可能コンポーネントをインストールすることはできません。</p> <p>プラグイン可能なコンポーネントに関して考慮すべきこと</p>

<li>別の UI フレームワーク/ライブラリのサブコンポーネントを使用している可能性があります</li> <li>カスタム CSS を使用することもできます</li> <li>画像などの他のファイルに依存する場合があります</li> </ul>

---

<p><strong>ライブラリをコピー</strong></p> <p><code>npm create vuetify</code></p> 経由で新しい Vuetify プロジェクトを作成しました。 <p>vite-env.d.ts を除く src フォルダー内のすべてを削除し、コンポーネント Renderer.vue</p> を作成しました。 <pre class="brush:php;toolbar:false;"><スクリプト セットアップ lang="ts"> 「vuetify/components」から { VContainer } をインポートします。 defineProps<{ 値: 不明 }>() </スクリプト> <テンプレート> <span class="red-text">値は: {{ JSON.stringify(value, null, 2) }}</span> </v-container> </テンプレート> <スタイル> .red-text { 色: 赤; } </style></pre> <p>およびindex.tsファイル</p> <pre class="brush:php;toolbar:false;">「./Renderer.vue」からレンダラーをインポートします; エクスポート { レンダラー };</pre> <p>vite.config.ts にライブラリ モードを追加しました</p> <pre class="brush:php;toolbar:false;">ビルド: { ライブラリ: { エントリ：resolve(__dirname, "./src/index.ts"), 名前: "レンダラー"、 ファイル名: "レンダラ"、 }、 ロールアップオプション: { 外部: ["vue"]、 出力: { グローバル: { vue: "Vue"、 }、 }、 }、 },</pre> <p>package.json ファイルを拡張しました</p> <pre class="brush:php;toolbar:false;">"ファイル": ["dist"], "メイン": "./dist/renderer.umd.cjs", "モジュール": "./dist/renderer.js", 「エクスポート」: { ".": { "インポート": "./dist/renderer.js", "require": "./dist/renderer.umd.cjs" } },</pre> <p>カスタム CSS を使用しているため、Vite はstyles.css ファイルを生成しますが、スタイルを .mjs ファイルに挿入する必要があります。この質問に基づいて、私はプラグイン vite-plugin-css-injected-by-js を使用しています。</p> <p>ビルド時に、カスタム CSS を含む必要な .mjs ファイルを取得します</p>

---

<p>コンポーネントの使用</strong></p> <p><code>npm create vue</code></p> を使用して新しい Vue プロジェクトを作成しました。 <p>テストの目的で、生成された .mjs ファイルを新しいプロジェクトの src ディレクトリに直接コピーし、App.vue ファイルを </p> に変更しました。 <pre class="brush:php;toolbar:false;"><スクリプト セットアップ lang="ts"> import { onMounted, type Ref, ref } from "vue"; const ComponentToConsume: Ref = ref(null); onMounted(async () => { 試す { const { Renderer } = await import("./renderer.mjs"); // 実行時にコンポーネントを取得します ComponentToConsume.value = レンダラー; } キャッチ (e) { コンソール.ログ(e); } ついに { console.log("完了..."); } }); </スクリプト> <テンプレート> <div>以下のインポートされたコンポーネント:</div> <div v-if="ComponentToConsume === null"""まだ読み込み中..."</div> <消費するコンポーネント v-else :value="123" /> </template></pre> <p>残念ながら、次の警告とエラーが表示されます</p> <ブロック引用> <p>[Vue warn]: Vue はリアクティブ オブジェクトになったコンポーネントを受け取りました。これは不必要なパフォーマンスのオーバーヘッドを引き起こす可能性があるため、コンポーネントを <code>markRaw</code> でマークするか、<code>ref</code> の代わりに <code>shallowRef</code> を使用することで回避する必要があります。 </p> </blockquote> <ブロック引用> <p>[Vue warn]: インジェクション「Symbol(vuetify:defaults)」が見つかりません。 </p> </blockquote> <ブロック引用> <p>[Vue warn]: セットアップ関数の実行中に処理できないエラーが発生しました</p> </blockquote> <ブロック引用> <p>[Vue warn]: スケジューラー更新の実行中に処理できないエラーが発生しました。 </p> </blockquote> <ブロック引用> <p>キャッチされません (約束どおり) エラー: [Vuetify] デフォルトのインスタンスが見つかりません</p> </blockquote> <p>私に何が足りないのか、あるいはそれを修正する方法を知っている人はいますか? </p>

Answer 1

Vuetify は分離コンポーネントを提供していないため、プラグインを初期化する必要があります。これはメイン アプリケーションで行う必要があります:

リーリー

ライブラリとメイン アプリケーションが同じコピーを使用するように、プロジェクト deps で vuetify が重複していないことを確認してください。

lib は開発依存関係として vuetify を使用し、それをロールアップ external で指定して、プロジェクトのグローバルなものがライブラリにバンドルされるのを防ぐ必要があります:

リーリー