들어가며

안녕하세요, 딜리셔스 웹프론트엔드 개발팀 글로벌파트 김선진입니다.

지난 글에서는 기존 Vue 프로젝트에 SFC로 작업되어 있는 컴포넌트를 Rollup.js 번들러를 사용하여 라이브러리로 빌드하는 과정을 소개했습니다.

이렇게 빌드까지 완료된 라이브러리도 이후에 수정이나 기능 추가가 필요하곤 합니다.

그렇다면 수정이 일어날 때마다 commit하고 build하고 publish하는 일련의 과정을 거쳐야만 할까요?

이번 글에서는 로컬 개발 환경에서 편하게 plugin을 개발하고 테스트하는 방법을 소개하려고 합니다.

로컬에서 Vue Plugin 개발하기

로컬에서 plugin을 개발하는 방법은 여러가지 있겠지만 그 중에서 제가 사용했던 두 가지 방법을 소개하겠습니다.

1. Plugin 내부에 개발 진입점 만들기

우리가 만든 것은 Vue plugin이기 때문에 plugin 내부 기능을 테스트하기 위해 plugin을 외부 프로젝트에 install 할 필요가 없습니다. plugin을 개발하고 있는 프로젝트에 간단한 진입점을 만들어주기만 하면 됩니다.

plugin이 아닌 다른 Vue project에서 진입점을 어떻게 만드는지 알고 있다면 이 작업은 매우 간단합니다.

먼저 진입점으로 사용할 파일을 넣을 serve폴더를 만들어줍니다. (폴더명은 무엇을 사용해도 상관 없습니다.)

그리고 serve 폴더 내부에 진입점 역할을 할 serve.ts 파일과 어플리케이션으로 렌더링 될 serve.vue 파일도 만들어줍니다.

serve.ts

serve.ts 파일은 다른 어플리케이션 진입점으로 사용하는 main.ts와 동일하게 작성해주시면 됩니다.

라이브러리는 install function을 직접 import 해서 Vue.use로 넘겨줍니다.

import Vue from 'vue';
import _App from './serve.vue';
import sinsangpaylib from '@/entry.ts';
Vue.use(sinsangpaylib);

Vue.config.productionTip = false;

new Vue({
  render: h => h(_App),
}).$mount('#app');

serve.vue

serve.vue파일은 테스트 앱을 작성해주시면 됩니다.

<template>
  <div id="app">
    <!-- 필요한 테스트 컴포넌트를 여기에서 사용하거나 -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  // 여기 내부에 작성해서 테스트 할 수 있다.
  name: 'Serve',
  components: {
  },
  methods: {
    test: (e) => {
      console.log(e)
    },
  }
});
</script>

<style scoped>
</style>

이렇게 하면 진입점 설정이 완료됩니다.

package.json

이제 진입점을 기반으로 실행 script를 package.json에 추가해 줍시다.

vue-cli-service를 사용합니다.

"serve": "vue-cli-service serve serve/serve.ts"

다음으로 npm run serve 명령어를 입력하면 vue 어플리케이션이 nodejs 위에서 실행됩니다.

편하게 기능 개발과 수정을 진행하면 됩니다.

2. Rollup의 watch function 사용하기

로컬에서도 외부 프로젝트에 라이브러리를 install 해서 테스트해보고 싶을 수도 있습니다.

그럴 때를 위하여 @rollup/plugin-replace와 rollup에서 제공해주는 watch function을 사용해봅시다.

rollup.config.js

rollup.config.js파일에서 replace영역을 수정해줍시다.

minimist 모듈은 명령줄에서 옵션을 파싱해주는 편리한 모듈입니다.

(자세한 설명은 모듈 github 페이지를 참고하세요. https://github.com/substack/minimist)

import minimist from 'minimist';
const argv = minimist(process.argv.slice(2));

plugins: [
	...
	replace: {
      'process.env.NODE_ENV': JSON.stringify(args.prod ? "production" : "development"),
    },
	...
]

이제 실행 명령에 —prod 옵션이 있으면 production, 아니면 development 환경이 됩니다.

그리고 rollup 명령어에 —watch 옵션을 추가해주면 소스가 변경될 때마다 rollup이 자동으로 번들링을 시작합니다. 특정 파일로 범위를 제한하고 싶다면 rollup.config.js에 아래 watch 속성을 지정하면 됩니다.

watch: {
    include: 'src/**'
}

외부 프로젝트에 plugin module install 하기

먼저 plugin 프로젝트에서 터미널을 열고 아래 명령을 실행해줍니다.

npm link

해당 명령어를 실행하면 plugin 프로젝트에 global symlink가 생성됩니다. symlink란 심볼릭 링크의 줄임말로, 일종의 바로가기와 비슷한 역할이라고 생각하면 편합니다. link를 통해 연결하면 원본 링크와 바로 연결되기 때문에 plugin 프로젝트가 변경 되었을 때 자동으로 link된 프로젝트의 module도 업데이트 해주기 때문에 install을 여러 번 수행할 필요가 없어집니다.

외부 프로젝트에서는 아래 명령어로 link를 연결합니다.

npm link PLUGIN_NAME

이제 link 연결이 완료 되었으니 편하게 개발할 수 있습니다!

혹시라도 link를 수행했는데 vue type 에러가 발생한다면 로컬 프로젝트의 node_modules간 충돌이 발생한 것이기 때문에, 당황하지 말고 plugin에 있는 node_modules 폴더를 삭제하면 테스트 가능한 상태가 됩니다.

로컬 개발 테스트가 모두 종료 되었다면 외부 프로젝트에서 먼저 link를 해제해 줍니다.

npm uninstall PLUGIN_NAME

그리고 plugin 프로젝트로 이동해서 링크를 끊어줍니다.

npm unlink

이렇게 로컬 개발 테스트가 모두 끝났습니다!

마치며

여기까지 지금까지 Vue 컴포넌트를 라이브러리로 빌드하고, 빌드된 라이브러리를 로컬 환경에서 수정하는 방법을 소개했습니다.

이번 기회를 통해 신상페이 가상 키패드 모듈을 라이브러리로 분리하고 보일러 플레이트를 조금이나마 줄일 수 있게 되어 기쁩니다. 또한 rollup은 webpack에 비해 빌드 속도나 모듈 크기 면에서 차이가 크다는 점을 몸소 느낄 수 있어 좋았습니다. 다만 node_modules의 의존성에 대한 지식이 짧아 충돌 오류가 발생했을 때 해결하는 것에 고난을 겪었던 것이 아쉬웠습니다.

모쪼록 처음 Vue plugin을 개발하시는 분께 조금이나마 도움이 된다면 좋겠습니다.

그럼, 읽어주셔서 감사합니다!