Vue 패키지 개발하기

작년 말부터 하고 싶었지만 시간이 안나서 못했던 일 - 바로 공식 npm 저장소에 내 라이브러리를 올릴 일이었다. 작년 하반기에는 vue.js + Typescript 로 웹 페이지를 개발하고 있었는데, 그 프로젝트에서 견적서의 금액을 한글로 바꾸는 부분을 꼭 npm에 올리고 싶었다.

그래서 결국 만들어 올렸다. 한 3~4시간 걸린듯하다. 이 패키지가 할 수 있는 일은 숫자를 한글로 변환해준다. 예를 들어 100,1000원은 ‘일백만일천원’ 이런식으로 견적서에서 사용할 수 있는 한글로 변환한다.

이 글은 해당 패키지를 만들고 퍼블리싱까지 한 일을 정리해서 올렸다. 해당 패키지는 vue-cli와 타입스크립트를 써서 만들었다. 워낙 간단한 라이브러리라 타입스크립트는 안써도 된다.

1
2
npm install -g @vue/cli
vue create my-lib

@vue/cli는 create-react-app 과 같이 vue 앱의 스켈레톤을 만들어주는 패키지다. 만들어진 디렉토리로 들어가서 앱을 실행해본다.

1
2
cd my-lib
npm run serve

뷰 기본 앱을 볼 수 있다.

모듈(컴포넌트, 필터) 패키징화

/[project-root]/src 에 filters 디렉토리를 만든다. 그 후 index.ts에 아래의 코드를 작성했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import Vue from 'vue';

/**
* 숫자를 한글로 변환한다.
* @param value Filter 값으로 넘어온 숫자
* @param priceMode true면 변환된 한글에 '일'이 붙는다. 예를 들어 '일십이만삼천원'과 같이 주로 금액을 표시할때 사용한다.
* false라면 '일'이 생략된다. 다만 억과 같이 단독으로 사용했을때 어색한 숫자는 앞에 '일'을 붙인다.
* @returns 한글로 변환된 숫자를 리턴한다. 만약 숫자가 아니거나, 범위를 초과하거나 기타 문제가 발생했을 경우 빈 문자열을 리턴한다.
*/
export function numToKr(value: number, priceMode = true): string {
if (value === 0) {
return '영';
} else if (value === 1) {
return '일';
}

const han1 = ['', '일', '이', '삼', '사', '오', '육', '칠', '팔', '구'];
const han2 = ['', '만', '억', '조', '경', '해'];
const han3 = ['', '십', '백', '천'];

if (!priceMode) {
// 1만 들어올 경우 문제가 생긴다.
if (value !== 1) {
han1[1] = '';
}
}

const numStr = value.toString();
const size = numStr.length;

if (size > 4 * han2.length) {
return '';
}
let kor = '';
let tmp: string[] = [];

for (let i = 1; i < numStr.length + 1; i++) {
const v1 = Number.parseInt(numStr.charAt(i - 1), 10);
if (isNaN(v1)) {
break;
}
if (v1 !== 0) {
tmp.push(han1[v1]);
tmp.push(han3[(size - i) % 4]);
}

if ((size - i) % 4 === 0 && tmp.length !== 0) {
// 일억과 같이 일을 생략하면 어색한 숫자는 '일'을 붙여준다.
kor += tmp.join('');
if (tmp.length === 2 && v1 === 1 && !priceMode) {
kor += '일';
}

tmp = [];
kor += han2[(size - i) / 4];
}
}
return kor;
}

/**
* 숫자로 된 금액을 한글로 변환한다.
* 예) 994950 -> 구십구만사천구백오십원
*/
function install() {
Vue.filter('numberToKor', numToKr);
}

export default install;

해당 모듈은 단순하게 main.ts 혹은 main.js에서 아래와 같이 사용하면 된다.

1
2
3
import NumberToKorFilter from 'vue-number-to-kor';

Vue.use(NumberToKorFilter);

1. 라이브러리 빌드 셋업

먼저 해당 모듈을 타겟으로 잡고 빌드한다. vue-cli를 설치하면 내부적으로 vue-cli-service 를 사용하는데, 이 패키지를 이용하여 해당 모듈을 빌드한다. 기존 package.json은 아래와 같은 형태일 것이다.

1
2
3
4
5
6
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service test:unit"
}

여기에 번들링할 명령어 - build:bundle을 추가한다.

1
2
3
4
5
6
7
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:bundle": "vue-cli-service build --target lib --name vue-number-to-kor ./src/filters/index.ts",
"lint": "vue-cli-service lint",
"test": "vue-cli-service test:unit"
},

2. npm run build:bundle

위 명렁어 실행을 마치면 dist 디렉토리에 umd와 commonjs 용 자바스크립트 라이브러리가 번들링되어 있을 것이다.

3. package.json에 name설정 및 main과 files 추가

이 부분이 중요한데, 반드시 package.json에 main 프로퍼티를 추가해야 한다. umd와 commonjs 중 하나를 선택하면 된다.

1
2
3
{
"main": "./dist/vue-number-to-kor.common.js"
}

그리고 어떤 파일을 패키지에 넣을 것인지 npm에 알려줘야 한다. 이를 package.json에 추가한다.

1
2
3
4
5
6
7
8
9
{
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],
}

package.json에 name 속성이 있다. 이게 npm 공식 저장소의 패키지 이름이 되니까 신중하게 결정하도록 한다. 물론 겹치지 않는 걸로 한다.

1
2
3
{
"name": "패키지 이름",
}

4. npm 로그인

npm 공식 저장소에 패키지를 퍼블리싱 하려면 물론 npm에 회원 가입이 되어 있어야 한다. 계정이 없으면 먼저 회원가입을 하자. 그리고 npm login 명령어를 통해서 해당 계정으로 로그인한다. 로그인 상태 확인은 npm whoami를 통해서 할 수 있다.

5. 빌드 및 퍼블리싱

퍼블리싱 전 중간에 코드를 바꾸지 않았으면 다시 빌드 하지 않아도 되지만, 얼마 걸리지 않으니까 그냥 확실하게 빌드 다시 하자.

1
npm run build:bundle

그 다음 npm 공식 저장소에 퍼블리싱을 한다.

1
npm publish --access public

다음 npm공식 저장소에서 해당 패키지가 잘 퍼블리싱 되었는지 확인한다. 이걸로 끝이다.

기타

package.json에는 상당히 많은 정보를 담아야 한다. 기왕 패키지를 배포하는거 다른 개발자가 많이 쓰면 기분이 좋지 않은가.

반드시 기입하기를 권장하는 정보는 version, license, homepage 이며, 넣으면 좋은 정보는 author, keywords, bugs가 있다.

아래는 예시 package.json이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"version": "0.1.1",
"license": "MIT",
"keywords": [
"vue",
"vuejs",
"vue-number-to-kor",
"한글",
"숫자 변환",
"filter"
],
"author": {
"name": "Jongha Kim",
"email": "kim.jongha@gmail.com"
},
"bugs": {
"url": "https://github.com/wisedog/vue-number-to-kor/issues"
},
"homepage": "https://github.com/wisedog/vue-number-to-kor",
}

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×