0Pricing
Vue Academy · 강의

Vite 라이브러리 모드 설정

vite.config.ts의 build.lib, 진입점, 형식(es/cjs/umd)과 외부 의존성을 설정합니다.

Vite 라이브러리 모드 설정은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

라이브러리 모드

Vite의 라이브러리 모드는 웹 사이트로 실행하는 대신 다른 앱에서 가져올 수 있도록 패키지를 빌드합니다. vite.config.ts의 build.lib에서 구성합니다.

진입점

entry 파일은 라이브러리의 공개 표면입니다. 사용자가 접근할 모든 컴포넌트와 유틸리티를 다시 내보냅니다.

// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";

build.lib 구성하기

build.lib.entry가 해당 파일을 가리키도록 설정하고 라이브러리에 전역 name을 지정합니다(UMD 빌드에서 사용됨).

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "MyUiLib"
    }
  }
});

formats 배열

formats는 출력 모듈 형식을 선택합니다. 최신 라이브러리에서는 ["es", "cjs"]가 ESM 번들러와 Node/CommonJS 사용자를 모두 지원합니다.

lib: {
  entry: resolve(__dirname, "src/index.ts"),
  name: "MyUiLib",
  formats: ["es", "cjs"]
}

fileName 함수

fileName은 형식을 인수로 받는 함수로 지정할 수 있으므로 출력 형식마다 서로 다른 이름을 만들 수 있습니다.

lib: {
  // ...
  fileName: (format) => "my-ui-lib." + format + ".js"
}

Vue를 외부화하는 이유

Vue를 라이브러리에 번들로 포함하면 안 됩니다. 사용자가 이미 Vue를 가지고 있기 때문입니다. Vue를 번들에 포함하면 Vue가 중복되고 반응성이 깨집니다. Vue를 외부 의존성으로 지정합니다.

rollupOptions.external

build.rollupOptions 아래의 external에 vue를 나열하여 출력물에서 인라인 처리하지 않고 가져오기로 유지합니다.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ["vue"]
  }
}

UMD용 output.globals

UMD 빌드도 생성한다면 브라우저가 각 외부 의존성에 해당하는 전역 변수 이름을 알아야 합니다. vue를 전역 변수 Vue에 매핑합니다.

rollupOptions: {
  external: ["vue"],
  output: {
    globals: { vue: "Vue" }
  }
}

동료 의존성 외부화하기

동료 의존성도 외부화해야 합니다. 예를 들어 아이콘 세트나 사용자가 이미 설치한 유틸리티 라이브러리는 번들에 포함하지 않습니다.

external: ["vue", "vue-router", "@vueuse/core"]

빌드하기

빌드를 실행하여 구성된 형식을 dist에 출력합니다. 동일한 플러그인 처리 흐름(vue, vueJsx)이 소스 파일에도 계속 적용됩니다.

npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.js

CSS 분리하기

컴포넌트 스타일을 사용자가 가져오는 별도의 CSS 파일로 출력할 수 있습니다. 이렇게 하면 JS 번들을 간결하게 유지하고 스타일 포함 여부를 사용자가 제어할 수 있습니다.

// consumer side
import "my-ui-lib/dist/style.css";

빠른 확인

Vue 라이브러리를 빌드할 때 vue를 rollupOptions.external에 나열하는 이유는 무엇입니까?

복습

Vite 라이브러리 모드는 entry 배럴 파일, name, formats 배열(es 및 cjs), fileName 함수로 build.lib 아래에서 구성합니다. rollupOptions.external을 통해 vue와 동료 의존성을 외부화하고, output.globals로 UMD 전역 변수를 매핑하여 Vue를 사용자가 제공하도록 합니다.

자주 묻는 질문

“Vite 라이브러리 모드 설정” 강의는 무료인가요?

네 — “Vite 라이브러리 모드 설정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vite 라이브러리 모드 설정”에서 뭘 배우나요?

vite.config.ts의 build.lib, 진입점, 형식(es/cjs/umd)과 외부 의존성을 설정합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Vite 라이브러리 모드 설정” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vite 라이브러리 모드 설정
  2. 컴포넌트 라이브러리의 TypeScript 선언
  3. 트리 셰이킹과 자동 가져오기
  4. npm 배포와 시맨틱 버전 관리
← Vue Academy(으)로 돌아가기