Vue 3에서 원격 구성 요소를 로드하는 방법

배경

최근 Vue 3 로우 코드 프로젝트에서 원격 구성 요소를 로드하라는 요구 사항을 받았습니다. 이러한 원격 구성 요소는 예측할 수 없는 이름을 가지며 데이터베이스에 저장됩니다. 어떤 구성 요소를 사용할 수 있는지 확인하려면 API를 통해 모든 구성 요소 데이터를 가져와야 합니다. 조사 끝에 이 요구 사항을 충족할 수 있는 두 가지 실행 가능한 솔루션을 찾았습니다.

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 구성 요소를 로드할 때 "상대 참조는 '/', './' 또는 '../' 중 하나로 시작해야 합니다." 오류가 발생합니다. 이는 브라우저가 'vue'에서 import { 반응성 } 사용을 직접 지원하지 않기 때문입니다. 'vue'를 https://..../vue.js 또는 './vue.js'로 변경해야 합니다. 일반적으로 빌드 도구가 자동으로 처리하므로 이에 대해 걱정할 필요가 없습니다.

문제 2: 다양한 Vue 3 컨텍스트

첫 번째 문제를 해결하기 위한 첫 번째 시도는 구성 요소를 모든 종속성과 함께 패키지하는 것이었습니다. 이로 인해 모든 import 문이 제거되었지만 불행히도 작동하지 않았습니다. 이는 우리 프로젝트의 Vue 3 컨텍스트와 node_modules의 Vue 3 컨텍스트가 호환되지 않기 때문입니다. 제대로 작동하려면 동일한 컨텍스트를 공유해야 합니다.

모든 Vue 3 메서드 이름이 서로 다른 컨텍스트에서 동일하더라도 해당 변수는 그렇지 않습니다. 이렇게 하면 원격 구성 요소가 정상적으로 로드되지 않습니다.

해결책

이러한 문제를 해결하려면:

1. 상대 참조 오류를 피하기 위해 import { 반응성 } from 'vue'를 const { 반응성 } = Vue로 바꿀 수 있습니다.
2. 소스 코드와 함께 패키징하는 대신 Vue 3 인스턴스 전체를 main.js로 가져올 수 있습니다. 이렇게 하면 프로젝트와 원격 구성 요소가 동일한 Vue 컨텍스트를 사용하게 됩니다.

코드 변환을 처리하기 위해 나는 Rollup-plugin-import-to-const(vite와 롤업 모두 지원)라는 롤업 플러그인을 만들었습니다. 코드를 import { 반응성 } 에서 'vue' 로 자동 변환하여 const { 반응성 } = Vue로 변환합니다. 이러한 솔루션을 사용하면 프로젝트에 원격 구성 요소를 로드할 수 있습니다.

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

실제로 이 두 가지 문제만 해결하면 어떤 형식(ESM/UMD/CJS 등)의 컴포넌트도 로드할 수 있습니다.

요약

원격 구성요소 로드는 이 두 가지 솔루션에만 국한되지 않습니다. 예를 들어 vue3-sfc-loader 또는 webpack5 모듈 페더레이션을 사용할 수도 있습니다. 선택은 프로젝트의 특정 요구 사항에 따라 달라집니다.

일반적으로 원격 구성 요소를 로드하는 방법은 로우 코드 플랫폼에서 가장 일반적으로 사용됩니다.