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

npm install의 그것

최근 Vue로 작업을 하던 중 작성하던 코드의 컴포넌트를 다른 사람들과 공유하는 방법이 뭘지 의문이 생겼습니다. 어떤 사이트를 배포하여 여러 사람들이 접근하게 하는 것은 늘 익숙한 일이지만, 그 중 일부의 기능만을 재사용할 수 있는 형태로 배포하려면 제가 아는 선에서는 라이브러리로 배포하는 방법이 가장 익숙했습니다.

npm 패키지가 이런 맥락의 것이라는 사실은 잘 알고 있었지만, 늘 가져다 사용하기만 한 입장에선 굉장히 복잡한 프로세스가 있다고 생각했었습니다. 뭔가 저와 다른 차원의(?) 개발자들만이 범접할 수 있는 영역이란 생각이 들었었는데, 어떤 의미로는 맞기도 합니다 (제가 오픈소스를 만든 것은 아니기 때문에...). 하지만 npm 패키지 자체를 만들어 올리고 공개하는 것 자체는 의외로 굉장히 간단합니다.

배포 시도해보기

이번 포스팅에선 간단하게 vue로 제작한 버튼 컴포넌트를 패키지로 만들어서 사용하는 과정을 소개해보겠습니다. 이 버튼이 어떤 특수한 기능을 내포하여 제가 배포하고 싶다기보다는, 컴포넌트를 배포하는 예시로 사용하는 점 참고 부탁 드립니다.

사용되는 코드는 공식 문서를 참고하였습니다.

StitchButton 컴포넌트 생성하기

우선 vue-cli로 간단하게 vue2 프로젝트를 생성하고, StitchButton이라는 컴포넌트를 아래와 같이 생성하였습니다.

<template>
  <button type="button" :class="color">
      <slot />
  </button>
</template>

<script>
export default {
  name: "StitchButton",
  props: {
      color: String,
  }
};
</script>

<style scoped>
button {
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 15px;
    background-color: #777777;
    color: white;
    box-shadow: 4px 4px 6px #999999;
}

.primary {
    background-color: #1976D2;
}

.secondary {
    background-color: #DC004E;
}
</style>

각각 default, primary, secondary 클래스에 따라 색이 달라진 버튼입니다. 이 컴포넌트 자체를 이제 외부 프로젝트에서 npm 패키지로 다운받아 사용할 수 있게 해보겠습니다.

package.json 설정하기

{
  "name": "stitch-button",
  "version": "0.1.0",
  "private": false,
  "main": "dist/stitch-button.common.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-lib": "vue-cli-service build --target lib --name stitch-button src/index.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
}

• 버전을 명시합니다. 코드가 바뀐 채로 다시 배포하려면 버전을 올려야합니다.
• private 옵션은 true로 바뀌어야 합니다.
• main에 패키지에 사용될 메인 코드 파일의 경로를 적어줍니다. 참고로 경로를 모르겠다면 npm run build를 해서 dist 폴더에 나온 common.js 확장자의 파일을 적어주면 됩니다.
• build-lib script에 라이브러리로 만들어주는 명령어를 적어줍니다. 관련된 코드는 공식 문서에서 확인이 가능하며 대략적으로 설명하면 이렇습니다.

vue-cli-service build --target lib --name <라이브러리명> <엔트리 파일 경로>

엔트리 파일 생성

위에서 링크한 공식 문서를 참고하여 동일하게 작성을 해주었습니다. 어떤 컴포넌트를 라이브러리에서 export할지, 그리고 패키지를 install해주기 위한 기본적인 코드를 세팅합니다. src 디렉토리 안에 index.js 파일을 만들어줍니다.

// src/index.js

import StitchButton from "./components/StitchButton.vue";

export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("StitchButton", StitchButton);
}

const plugin = {
  install,
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

export default StitchButton;

이제 npm run build-lib를 실행하여 배포 파일을 만들고 배포를 진행해보겠습니다.

npm에 publish 하기

npm

npm에 계정이 없다면 생성한 뒤, 커맨드라인을 통해 로컬에서 npm에 로그인을 해보겠습니다.

npm login

로그인이 성공했고, 빌드가 완료됐다면 다음 명령어를 실행합니다.

npm publish

중복되는 이름의 라이브러리가 없다면 순식간에 배포가 완료될 겁니다. 제가 만든 라이브러리는 이 링크에서 보실 수 있습니다.

 

참고사항

현재 배포한 패키지를 install하여 사용하려하면 오류가 발생하는 것으로 보입니다. 해당 부분은 수정이 되면 다시 업데이트 할 예정입니다.