Skip to main content

Vue.JS 컴포넌트를 npm 패키지로 배포하기

이 문서는 제목에서 설명한 대로 vue.js component를 npm package로 배포하는 방법에 대해 설명합니다. 이 설명은 완전한 이해를 목적으로 작성된 것이 아니라 짧은 시간에 머릿속에서 사라지는 내 경험을 기록하기 위한 목적이 크기 때문에 읽는 사람의 역량에 따라 전혀 이해를 하지 못할 수도 있습니다.

준비#

이 문서를 이해하기 위해서는 npm, vue.js, webpack 등의 기술에 대해 기본적인 지식이 있어야 합니다.

목표#

@realgrid/vue-realgrid 라는 이름으로 vue component를 npm에 배포했습니다.

이 과정을 이해하는 것이 목표입니다.

npm 계정 만들기#

  • npm에 패키지를 만들어 배포하기 위해서는 계정이 있어야 합니다.
  • 개인 계정을 만들고 조직(Organizations) 계정을 만들수 있습니다.
  • 조직계정의 관리는 역시 개인계정으로 하면 됩니다.

vue.js 컴포넌트 만들기#

npm package 만들기#

  1. vue-sfc-rollup 유틸리티 설치

    npm install -g vue-sfc-rollup

  2. sfc-rollup-init 실행

    $ sfc-rollup-init
    Is this a single component or a library?
    [1] Single Component
    [2] Library
    Select one [1/2]: 1
    What is the npm name of your component? test3
    What is the kebab-case tag name for your component? (test3)
    Enter a location to save the component files: (./test3)
    Init is complete, your files have been generated and saved into the directory you specified above.
    Within that directory, use src/test3.vue as a starting point for your SFC.
    When you're ready, run `npm run build` to generate the redistributable versions.

  3. 폴더로 이동해서 npm install실행

  4. 콤포넌트 또는 라이브러리 구현

  5. npm run build 실행

참조#

npm package 배포하기#

  • npm 사용자 계정 추가
    $ npm adduser
    Username: onlydel
    Password:
    Email: (this IS public) onlydel@realgrid.com
    Logged in as onlydel on https://registry.npmjs.org/.
  • npm publish
    • publish 하기 전에 버전업
    • 한 번 배포하면 되돌리기 어려움
  • npm unpublish
    • 배포한것 취소는 최초 배포후 72시간 이내에만 가능
    • unpublish한 다음 24시간 이내에 같은 이름 사용불가