일을 하다가 canvas api로 간단한 차트를 그리는 기능을 개발하였는데, 이 기능을 패키지로 만들어서 관리를 하면 좋을 것 같았다. 그래서 이번에 npm에 배포를 하면서 그 과정을 기록하고자 한다.
프로젝트 생성 및 package.json 설정
- 먼저 프로젝트 폴더를 생성하고
package.json파일을 생성한다.npm init명령으로 생성할 수 있으며,-y옵션을 주면 선택사항이 기본값으로 처리된다.
$ npm init -y-
package.json파일을 작성한다. 해당 패키지에 관한 메타데이터를 기술한 문서로, 아래와 같은 항목들을 지정할 수 있다. 자세한 항목은 npm 문서에서 확인할 수 있다.name: 패키지 이름author: 작성자description: 패키지에 대한 설명keywords: 패키지에 대한 키워드version: 패키지 버전main: 패키지의 엔트리 포인트types: 타입스크립트에서 사용할 타입 선언 파일이 있는 위치repository: 저장소 주소license: 패키지 라이센스files: 패키지가 설치될 때 포함될 파일들dependencies: 의존성 패키지 목록devDependencies: 개발할 때만 필요하고 설치될 때는 필요가 없는 의존성
타입 정의
타입스크립트로 소스코드를 작성했고 타입을 지원할 계획이기 때문에, package.json에서 타입 파일 경로를 정의해야 한다.
// package.json
{
...
"types": "./types/index.d.ts"
}위와 같이 "types" 프로퍼티로 정의할 수 있다. 그리고 패키지가 설치된 프로젝트의 타입스크립트 컴파일러는 이 속성을 확인하여 타입 파일을 확인하게 된다.
./types/index.d.ts 파일에서 패키지를 사용하는데 필요한 타입들을 export하면 된다.
// index.d.ts
export type TypeFoo = ...;
export type TypeBar = ...;
type TypeBaz = ...;
export default TaypeBaz;빌드
개발이 끝났으면 빌드를 할 차례다. 타입스크립트를 자바스크립트로 컴파일하고, 번들링, 모듈 형식 변경 등 필요한 작업들을 처리한다.
이번에는 복잡한 번들링 설정이 없고, 새로운 번들러를 공부해볼 겸 Rollup.js를 사용해 보았다.
설정파일(rollup.config.js)을 작성하고 빌드 스크립트를 추가해준다. 그리고 빌드를 하기 전에 eslint로 코드를 검사해주도록 하였다.
// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
export default {
input: './src/index.ts',
output: {
file: './dist/index.js',
format: 'cjs',
},
plugins: [
typescript({
tsconfig: 'tsconfig.json',
}),
],
};// pakcage.json
{
...
"scripts": {
"lint": "eslint --ext .ts src/",
"build": "npm run lint && rollup --config",
},
}배포
- 배포를 하기 위해서 먼저 npm에 계정을 만든다. npm에서 가입을 하거나, 터미널에서
npm adduser명령어로 만들 수 있다. 계정을 추가하면 입력한 메일로 확인메일이 오는데 체크해주자. - 터미널에서
npm login으로 로그인한다. npm publish명령어로 패키지를 배포한다.
테스트 추가, 타입정의, README 작성 등을 하고 관련 내용을 추가할 예정이다.
배포한 결과물은 아래의 링크에서 확인 할 수 있다.
Reference
Engineer