Cara Memuatkan Komponen Jauh dalam Vue 3

Latar belakang

Baru-baru ini saya menerima keperluan dalam projek kod rendah Vue 3 untuk memuatkan komponen jauh. Komponen jauh ini mempunyai nama yang tidak dapat diramalkan dan disimpan dalam pangkalan data. Saya perlu mengambil semua data komponen melalui API untuk menentukan komponen yang tersedia. Selepas penyelidikan, saya menemui dua penyelesaian yang berdaya maju untuk memenuhi keperluan ini.

Komponen UMD Fail HTML

Ini adalah penyelesaian paling mudah untuk dilaksanakan. Kami hanya perlu membungkus komponen dalam format UMD dan menggunakannya terus dalam fail 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...

kemudian gunakan dalam projek:

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

Apabila memuatkan komponen TestInput jauh seperti yang ditunjukkan di atas, ia menyebabkan ralat "Rujukan relatif mesti bermula dengan sama ada '/', './' atau '../'". Ini kerana penyemak imbas tidak menyokong secara langsung menggunakan import { reaktif } daripada 'vue' - kita perlu menukar 'vue' kepada https://..../vue.js atau './vue.js'. Biasanya, kami tidak perlu risau tentang perkara ini kerana alatan binaan kami mengendalikannya secara automatik.

Masalah 2: Konteks Vue 3 yang Berbeza

Percubaan pertama saya untuk menyelesaikan masalah pertama ialah membungkus komponen dengan semua kebergantungannya. Walaupun ini mengalih keluar semua penyata import, malangnya ia tidak berfungsi. Ini kerana konteks Vue 3 dalam projek kami dan konteks Vue 3 daripada node_modules tidak serasi - mereka perlu berkongsi konteks yang sama untuk berfungsi dengan betul.

Walaupun semua nama kaedah Vue 3 adalah sama merentas konteks yang berbeza, pembolehubahnya tidak sama. Ini menghalang komponen jauh daripada dimuatkan secara normal.

Penyelesaian

Untuk menyelesaikan masalah ini:

1. Kami boleh menggantikan import { reaktif } daripada 'vue' dengan const { reactive } = Vue untuk mengelakkan ralat rujukan relatif.
2. Kami boleh mengimport keseluruhan contoh Vue 3 dalam main.js dan bukannya membungkusnya dengan kod sumber. Ini memastikan projek dan komponen jauh kami menggunakan konteks Vue yang sama.

Untuk mengendalikan transformasi kod, saya mencipta pemalam rollup dipanggil rollup-plugin-import-to-const (menyokong kedua-dua vite dan rollup). Ia secara automatik menukar kod daripada import { reaktif } daripada 'vue' kepada const { reactive } = Vue. Dengan penyelesaian ini disediakan, kami boleh memuatkan komponen jauh dalam projek kami:

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

Sebenarnya, kami boleh memuatkan komponen dalam sebarang format (ESM/UMD/CJS, dll.) selagi kami menyelesaikan dua masalah ini.

Ringkasan

Memuatkan komponen jauh tidak terhad kepada dua penyelesaian ini. Sebagai contoh, kita juga boleh menggunakan vue3-sfc-loader atau Persekutuan Modul webpack5. Pilihan bergantung pada keperluan khusus projek anda.

Secara amnya, memuatkan komponen jauh paling kerap digunakan dalam platform kod rendah.