Comment charger des composants distants dans Vue 3

Arrière-plan

J'ai récemment reçu une exigence dans un projet low-code Vue 3 pour charger des composants distants. Ces composants distants portent des noms imprévisibles et sont stockés dans une base de données. Je dois récupérer toutes les données des composants via une API pour déterminer quels composants sont disponibles. Après recherches, j'ai trouvé deux solutions viables pour répondre à cette exigence.

Composants UMD du fichier HTML

C'est la solution la plus simple à mettre en œuvre. Il nous suffit de packager le composant au format UMD et de l'utiliser directement dans le fichier 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...

puis utiliser dans le projet :

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

Lors du chargement du composant TestInput distant comme indiqué ci-dessus, cela provoque une erreur « Les références relatives doivent commencer par '/', './' ou '../' ». En effet, les navigateurs ne prennent pas en charge directement l'utilisation de import { reactive } from 'vue' - nous devons remplacer 'vue' par https://..../vue.js ou './vue.js'. Habituellement, nous n'avons pas à nous en soucier car nos outils de construction le gèrent automatiquement.

Problème 2 : différents contextes Vue 3

Ma première tentative pour résoudre le premier problème a été de packager le composant avec toutes ses dépendances. Bien que cela ait supprimé toutes les instructions d'importation, cela n'a malheureusement pas fonctionné. En effet, le contexte Vue 3 de notre projet et le contexte Vue 3 de node_modules sont incompatibles : ils doivent partager le même contexte pour fonctionner correctement.

Même si tous les noms de méthodes Vue 3 sont les mêmes dans différents contextes, leurs variables ne le sont pas. Cela empêche les composants distants de se charger normalement.

Solution

Pour résoudre ces problèmes :

1. Nous pouvons remplacer import { reactive } from 'vue' par const { reactive } = Vue pour éviter l'erreur de références relatives.
2. Nous pouvons importer l'intégralité de l'instance Vue 3 dans main.js au lieu de la conditionner avec le code source. Cela garantit que notre projet et nos composants distants utilisent le même contexte Vue.

Pour gérer la transformation du code, j'ai créé un plugin de rollup appelé rollup-plugin-import-to-const (prenant en charge à la fois vite et rollup). Il transforme automatiquement le code de import { reactive } de 'vue' en const { reactive } = Vue. Avec ces solutions en place, nous pouvons charger des composants distants dans notre projet :

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

En fait, nous pouvons charger des composants dans n'importe quel format (ESM/UMD/CJS, etc.) à condition de résoudre ces deux problèmes.

Résumé

Le chargement de composants distants ne se limite pas à ces deux solutions. Par exemple, nous pouvons également utiliser vue3-sfc-loader ou webpack5 Module Federation. Le choix dépend des exigences spécifiques de votre projet.

De manière générale, le chargement de composants distants est le plus couramment utilisé sur les plates-formes low-code.