Vue 3 でリモート コンポーネントをロードする方法

背景

私は最近、Vue 3 ローコード プロジェクトでリモート コンポーネントをロードするという要件を受け取りました。これらのリモート コンポーネントは予測できない名前を持ち、データベースに保存されます。どのコンポーネントが利用可能であるかを判断するには、API を介してすべてのコンポーネント データを取得する必要があります。調査の結果、この要件を満たす 2 つの実行可能なソリューションを見つけました。

HTML ファイル UMD コンポーネント

これは実装するのが最も簡単なソリューションです。コンポーネントを UMD 形式でパッケージ化し、HTML ファイルで直接使用するだけです。

<div>



<p>However, this solution is not suitable for large projects due to its low efficiency.</p>

<h2>
  
  
  Vue 3 Project + ESM/UMD Components
</h2>

<p>This is the solution I implemented in my low-code project. During my research, I encountered and solved two main problems. Here's how it works:</p>

<h3>
  
  
  Problem 1: Relative References
</h3>

<p>Since our project doesn't need to be compatible with IE, we can package the source code in ESM format. For example:<br>
</p>

<pre class="brush:php;toolbar:false">import { reactive } from 'vue'
// other code...

その後、プロジェクトで使用します:

const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')

上記のようにリモート TestInput コンポーネントをロードすると、「相対参照は '/'、'./'、または '../' のいずれかで始まる必要があります」エラーが発生します。これは、ブラウザが import { reactive } from 'vue' の直接使用をサポートしていないためです。'vue' を https://..../vue.js または './vue.js' に変更する必要があります。通常、ビルド ツールが自動的に処理するため、これについて心配する必要はありません。

問題 2: 異なる Vue 3 コンテキスト

最初の問題を解決するための最初の試みは、コンポーネントをすべての依存関係とともにパッケージ化することでした。これによりすべての import ステートメントが削除されましたが、残念ながら機能しませんでした。これは、プロジェクトの Vue 3 コンテキストと、node_modules の Vue 3 コンテキストに互換性がないためです。正しく動作するには、同じコンテキストを共有する必要があります。

すべての Vue 3 メソッド名は異なるコンテキスト間で同じですが、変数は同じではありません。これにより、リモート コンポーネントが正常にロードされなくなります。

解決

これらの問題を解決するには:

1. 相対参照エラーを避けるために、'vue' の import { reactive } を const { reactive } = Vue に置き換えることができます。
2. ソース コードと一緒にパッケージ化する代わりに、Vue 3 インスタンス全体を main.js にインポートできます。これにより、プロジェクトとリモート コンポーネントが同じ Vue コンテキストを使用するようになります。

コード変換を処理するために、rollup-plugin-import-to-const というロールアップ プラグインを作成しました (vite と rollup の両方をサポート)。コードを import { reactive } から 'vue' から const { reactive } = Vue に自動的に変換します。これらのソリューションを導入すると、プロジェクトにリモート コンポーネントを読み込むことができます。

const { default: TestInput } = await import('http://localhost/component/input/0.1.0/bundle.mjs')

実際には、これら 2 つの問題を解決できれば、任意の形式 (ESM/UMD/CJS など) でコンポーネントを読み込むことができます。

まとめ

リモート コンポーネントのロードは、これら 2 つのソリューションに限定されません。たとえば、vue3-sfc-loader または webpack5 モジュール フェデレーションを使用することもできます。選択はプロジェクトの特定の要件によって異なります。

一般に、リモート コンポーネントのロードは、ローコード プラットフォームで最も一般的に使用されます。