lemon-coreui-v1 v1.0.5

Vite Library Build Configuration Guide

이 문서는 Vite를 사용한 Vue 컴포넌트 라이브러리 빌드 설정에 대해 설명합니다.

설정 파일 구조

vite.lib.config.js 파일은 라이브러리 빌드를 위한 주요 설정을 포함하고 있습니다.

기본 설정

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

빌드 설정

라이브러리 설정

• 진입점: src/components/pub/base/index.js
• 라이브러리 이름: lemon-coreui-v1
• 출력 파일명: index.[format].js

Rollup 옵션

• 외부 의존성: Vue
• 전역 변수: Vue는 'Vue'로 설정
• CSS 파일명: index.css로 통일

CSS/SCSS 설정

• SCSS 전처리기 설정이 포함되어 있음
• 공통 스타일시트: src/assets/scss/common/style.scss

주요 특징

1. Vue 컴포넌트 지원

   • @vitejs/plugin-vue 플러그인을 통한 Vue SFC 지원

2. CSS 처리

   • CSS 코드 분할 비활성화 (cssCodeSplit: false)
   • 모든 스타일이 하나의 CSS 파일로 번들링

3. 번들링 출력

   • 다양한 모듈 포맷 지원 (ES, UMD 등)
   • 외부 의존성으로 Vue 설정

사용 방법

설치

npm install

빌드

npm run build:lib

라이브러리 사용

import { ComponentName } from 'lemon-coreui-v1'
import 'lemon-coreui-v1/styles'

주의사항

1. Vue는 peer dependency로 처리되므로 프로젝트에 별도로 설치해야 합니다.
2. 스타일시트는 별도로 import 해야 합니다.
3. 컴포넌트 사용 시 Vue 3.x 버전이 필요합니다.