컴포넌트는 vue.js의 기본 구성 요소입니다.

좋은 컴포넌트를 만들어서 오픈소스로 배포하면,

awesome vue 등에 게시될 수 있습니다.

이번 글에서는 컴포넌트를 만들고 npm에 배포하는 방법에 대해 알아보겠습니다.

1. vue-cli 설치

https://cli.vuejs.org/

vue-clicreate-react-app과 비슷합니다.

프로젝트를 간편하게 생성할 수 있고, hot-reload 기능도 기본적으로 제공합니다.

다음을 통해 글로벌에 vue-cli를 설치하겠습니다.

npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli-service-global

vue --version # 버전 확인

2. vue-cli로 vue 프로젝트 생성

이제 쉘에서 vue 명령어를 사용할 수 있습니다.

예제로 배포할 프로젝트를 생성하겠습니다.

vue create vue-npm-example

vue_npm_example1.png

vue-cli로 프로젝트를 생성 시 미리 정의된 preset를 정할 수 있습니다.

vue_npm_example2.png

저는 babellinter를 선택하겠습니다.

혹시 sass 등 다른 기능을 사용하고 싶으면 선택해도 괜찮습니다.

vue-cli의 안내에 따라 프로젝트를 생성 한 후 cd vue-npm-example 명령어로 생성된 프로젝트로 이동하겠습니다.

vue_npm_example3.png

vscode로 생성된 파일들을 확인하면 vue 프로젝트가 쉽게 만들어진걸 확인 가능합니다.

3. 간단한 컴포넌트 구현

간단한 버튼 컴포넌트를 구현하겠습니다.

// AshButton.vue
<template>
  <button
    :class="[
      'ashButton',
      'ashButton--' + type,
      'ashButton--' + size,
    ]"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'AshButton',
  props: {
    type: {
      type: String,
      required: false,
      default: 'default'
    },
    size: {
      type: String,
      required: false,
      default: 'default'
    }
  }
}
</script>

<style scoped>
.ashButton {
  display: inline-block;
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #ffffff;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
}

.ashButton--default {
  background-color: #0194ef;
}

.ashButton--success {
  background-color: #1bb934;
}

.ashButton--error {
  background-color: #e1112c;
}

.ashButton--small {
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 12px;
}

.ashButton--default {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 16px;
}

.ashButton--large {
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 20px;
}
</style>

propssizetype을 받아서 버튼의 크기와 색깔을 각각 다르게 사용할 수 있는 간단한 컴포넌트입니다.

4. src/index.js 작성

컴포넌트를 npm을 통해 배포했을 때, 진입점이 필요합니다.

src/index.js에 작성하겠습니다.

import AshButton from './components/AshButton.vue'

const install = (Vue) => {
  Vue.component(AshButton.name, AshButton)
}

// auto install if used in browser
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export {
  AshButton
}

export default install

export defaultinstall 함수를 내보내면 Vue.use에 사용할 수 있고,

export { AshButton }을 하면 컴포넌트 별로 각각 불러와서 사용할 수도 있습니다.

5. package.json 업데이트

다음 설정에 따라 package.json 파일을 수정해줘야 합니다.

{
  "name": "@ashnamuh/vue-npm-example",
  "version": "0.1.0",
  "private": false,
  "main": "dist/ash.common.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name ash src/index.js",
    "lint": "vue-cli-service lint"
  },
  ...
}

namenpm에 배포할 패키지명입니다. 반드시 유일해야합니다.

versionsemver versioning에 따른 버전입니다.

privatefalse로 설정해야 npm에 배포가 가능합니다.

main은 패키지를 사용했을 때 진입지점이 됩니다. 빌드 후 생기는 파일을 설정했습니다.

build 스크립가 중요합니다.

원래 webpack 등을 사용해서 별도의 빌드 코드를 작성해야 합니다.

이젠 vue-cli-service에서 자체적으로 빌드 기능을 지원합니다.

빌드 targetlib으로 지정하면 npm 배포용으로 빌드됩니다.

진입점 파일인 src/index.js를 빌드했습니다.

—name 옵션은 빌드된 결과물 파일명을 의미합니다.

6. npm에 배포

npm run build를 입력해서 빌드를 진행합니다.

그럼 dist 폴더에 다음과 같은 파일들이 생성됩니다.

vue_npm_example4.png

npm에 등록하기 위해선 계정이 필요합니다.

https://www.npmjs.com/ 에서 npm 계정을 생성해주세요.

그리고 쉘에서 npm login 명령어로 로그인을 진행합니다.

vue_npm_example5.png

마지막으로 npm publish --access=public 명령어로 배포를 완료합니다.

vue_npm_example6.png

이제 npm install @ashnamuh/vue-npm-example로 패키지를 설치하고, 다음 코드를 작성해서 사용할 수 있습니다.

import Vue from 'vue'
import Ash from '@ashnamuh/vue-npm-example'

import '@ashnamuh/vue-npm-example/dist/ash.css'
Vue.use(Ash)

/*
<AshButton type="error">
  에러 버튼
</AshButton>
*/

생각해볼 것

  • propsvalidator를 추가해서 엄격히 검증하기
  • css preprocessor 도입 검토하기
  • css code split

예제 코드

예제 코드는 제 github에서 확인할 수 있습니다.

https://github.com/ashnamuh/vue-npm-example