vue 라이브러리 컴포넌트 배포 경험기 (vue, vite, npm, typescript, css)

최근 시작하는 몇 개의 사이드 프로젝트에서 '게시판' 기능이 필요했기에

아예 해당 컴포넌트를 라이브러리로 npm 에 배포해 사용하고자 npm 라이브러리를 만들었다.

 

라이브러리 결과물 : 

https://www.npmjs.com/package/vue-board-component

vue-board-component

 

IDE는 VScode, 프레임워크는 VueJS3, 언어는 TypeScript, 번들링 도구는 Vite 를 사용했다.

 

 

두 가지 트러블슈팅 건에 대해 얘기해 보겠다.

 

우선, 번들링에 Vite 사용기다.

[rollup 사용과 실패 경험]

기존엔 Webpack 으로 번들링 하고 있었으나,

Typescript 를 이용한 vue 컴포넌트 라이브러리 배포 예시를 찾다 보니

rollup.js 에 대한 예시가 많아 처음엔 rollup.js 를 이용해 봤다.

 

 

그러나 예시들은 vue2 기반이었으며 실제로 적용해 봤을 때 많은 에러를 유발했다.

구글링, StackOverflow 에서 해결법을 찾아 봐도 해결하지 못했다.

 

[vite 사용으로 성공 경험]

구글링 하는 와중에 Vite 를 사용하는 예제들이 몇 있었고,

비교적 Vue3 관련 된 최신 포스트가 많아 시도해 봤다.

 

결론만 말하자면, 

https://www.npmjs.com/package/vue-npm-library-example 의 github 를 참고해 라이브러리 배포에 성공했다.

 

vite 는 타 번들링 도구에 비해 번들링 속도가 빠르다는 장점이 있으며 그 외에도 장점이 많은 듯 하다.

(Vite를 사용해야하는 이유 를 보면 vite 내부적으로 rollup 을 사용하고 있는 것 같기도..?)

 

 

다음으로는 css 적용이다.

 

이번에 만든 게시판 컴포넌트 라이브러리는 class명과 게시판 데이터를 props 로 전달해 게시판을 커스터마이징 할 수 있지만, 기본적으로컴포넌트 내부에선 테이블 기본 구조를 위한 css 를 적용시켜 주고 있다. (Board.vue) 

 

[css 적용 실패 경험]

처음엔 기존에 퍼블리싱 하듯이 <style> 태그를 Board.vue 내부에서 적용 시켜줬으나, vite 로 빌드 된 결과물을 사용해 봤을 때, style이 하나도 적용되지 않았다.

 

[document API 로 css 적용 성공 경험]

html 태그에 inline 형식으로 넣어 줘도 적용이 안되는 것을 보니, 또한 구글링을 해 보니 (ISSUE참고)

컴포넌트 내부에서 style 을 적용해 주려면 javascript를 이용해 런타임에서 처리해야 하는 듯 하다.

 

그래서 결과적으론 mounted hook 에서 document API를 이용해 스타일을 적용해 줬다.

(mounted hook : html 태그가 html 문서에 마운트 된 이후의 시점) 

(다른 좋은 방법이 있다면 댓글 바란다.)

 

 

마무리

 

Vue3 를 이용해 라이브러리 컴포넌트를 배포해 보실 분들 이라면

https://github.com/agrisom/vue-npm-library-example 를 따라 배포해 보시길 바란다.

(특히나 config 관련 된 .json, .ts 파일들이 중요하다.)

 

(c.f. 배포 시 빌드 결과물인 dist 도 함께 배포를 했는데, dist 를 배포 시점이 아닌 유저가 npm install 하는 시점에 생성할 수 있는 방법이 있다면 댓글 바란다.)