배포된 .mjs 파일에서 사용할 수 있는 단일 Vue 구성 요소를 노출하는 라이브러리를 어떻게 만들 수 있나요?
<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/comComponents"에서 { VContainer }를 가져옵니다.
정의프로프<{ 값: 알 수 없음 }>()
</스크립트>
<템플릿>
<v-컨테이너>
<span class="red-text">값은 다음과 같습니다: {{ JSON.stringify(value, null, 2) }}</span>
</v-컨테이너>
</템플릿>
<스타일>
.red-text { 색상: 빨간색 }
<p>및 index.ts 파일</p>
<pre class="brush:php;toolbar:false;">"./Renderer.vue"에서 렌더러 가져오기;;
내보내기 { 렌더러 };</pre>
<p>vite.config.ts에 라이브러리 모드를 추가했습니다</p>
<pre class="brush:php;toolbar:false;">빌드: {
라이브러리: {
항목: 해결(__dirname, "./src/index.ts"),
이름: "렌더러",
파일명: "렌더러",
},
롤업옵션: {
외부: ["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>구성요소 사용</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 } = wait import("./renderer.mjs") // 런타임 중에 구성 요소를 가져옵니다.
ComponentToConsume.value = 렌더러;
} 잡기 (e) {
console.log(e);
} 마지막으로 {
console.log("완료...");
}
});
</스크립트>
<템플릿>
<div>아래에서 가져온 구성요소:</div>
<div v-if="ComponentToConsume === null">"아직 로드 중..."</div>
<소비할 구성요소 v-else :value="123" />
</템플릿></pre>
<p>안타깝게도 다음과 같은 경고와 오류가 발생합니다</p>
<인용문>
<p>[Vue 경고]: Vue가 반응형 객체가 된 구성 요소를 받았습니다. 이는 불필요한 성능 오버헤드를 유발할 수 있으므로 구성 요소를 <code>markRaw</code>로 표시하거나 <code>ref</code> 대신 <code>shallowRef</code>를 사용하여 방지해야 합니다. </p>
</인용문>
<인용문>
<p>[Vue 경고]: 'Symbol(vuetify:defaults)' 삽입을 찾을 수 없습니다. </p>
</인용문>
<인용문>
<p>[Vue 경고]: 설정 기능 실행 중 처리되지 않은 오류가 발생했습니다</p>
</인용문>
<인용문>
<p>[Vue 경고]: 스케줄러 새로 고침 실행 중 처리되지 않은 오류가 발생했습니다. </p>
</인용문>
<인용문>
<p>잡히지 않은(약속된) 오류: [Vuetify] 기본 인스턴스를 찾을 수 없습니다</p>
</인용문>
<p>제가 무엇을 놓치고 있는지, 아니면 어떻게 고칠 수 있는지 아시는 분 계신가요? </p>
