NPM에 라이브러리 배포하기

개요

이 글은 자바스크립트로 개발된 프로젝트를 리액트 환경으로 지원하기 위한 끝 맺음 같은 글이다.

프로젝트를 수행하기 위해 공부해 온 내용은 아래와 같다.

2024.05.02 - [개발/Bundle] - [Webpack] Webpack 이해하기 - Concepts

[Webpack] Webpack 이해하기 - Concepts

2024.05.09 - [개발/Bundle] - [Babel] Loader 사용하기 😎

[Babel] Loader 사용하기 😎

2024.05.13 - [개발/Bundle] - [rollup.js] 환경 설정하기(1) - 오류 해결하기

[rollup.js] 환경 설정하기(1) - 오류 해결하기

2024.06.10 - [개발/TypeScript] - tsconfig.json에 대한 이해

tsconfig.json에 대한 이해

2024.06.12 - [개발/Bundle] - [rollup.js] 환경 설정하기(2) - 플러그인 정리하기

NPM

NPM에서 라이브러리를 배포하기 위한 사전 준비

개인프로젝트일 경우 NPM 대표 사이트에 접속하여 회원가입을 먼저 진행하도록 하자.(2FA 설정은 미리 해두자)

npm | Home (npmjs.com)

npm | Home

나 같은 경우는 사내 NPM 계정이 이미 존재했기 때문에 해당 계정으로 진행했다.

 

NPM에 라이브러리를 배포하기 위한 환경설정

npm에 배포하기 위해 준비한 라이브러리에 .npmignore 라는 파일은 하나 추가하도록 하자.

.npmignore 파일은 npm에 라이브러리가 업로드 될 때 지정한 파일 및 폴더를 업로드 되지 않도록 설정할 수 있다.

 

예를들어, .npmignore에 아래와 같이 작성했다고 하자.

// .npmignore
**/.*
public/
src/
node_modules/

 

.npmignore에 작성된 내용은 아래와 같다.

• **/.* : 모든 디렉토리에 있는 숨김 파일( 이름이 . 으로 시작하는 파일)을 무시한다.
  예를 들어 .env , .git, .npmrc 등이 해당된다.
• public/ : public 폴더와 그 안의 모든 내용을 무시한다.
• src/ : src 폴더와 그 안의 모든 내용을 무시한다. 
  나는 빌드된 내용만 포함시키고자 src/를 추가했다.
• node_modules/ : node_modules 폴더와 그 안의 모든 내용을 무시한다.
  npm 패키지의 의존성이 설치되는 폴더이기 때문에 일반적으로 패키지에 포함하지 않는다.

npmignore 파일을 모두 작성했다면 이제 npm에 내가 정한 라이브러리 이름이 이미 존재하는지 확인한다.

npm info [procject name]

 

만약 존재하지 않다면 npm 에서 404 에러를 반환해준다.

npm info error

npm에 라이브러리가 중복되지 않는다면 npm login 을 통해서 npm에 접속하도록 한다.

npm login

ENTER를 입력할 경우 npm 브라우저가 열리게 된다.

2FA 설정을 진행했다면 OPT 를 입력하고 로그인이 진행된다.

 

NPM에 라이브러리 배포하기

- package.json

NPM 라이브러리 배포하기 위해서는 package.json이 존재해야한다.

package.json(이하 패키지) 파일이 npm 프로젝트의 핵심 메타데이터를 제공하는 중요한 역할을 하기 때문이다.

 

패키지 파일은 프로젝트 이름, 버전, 설명, 키워드, 라이센스, 작성사 정보 등을 포함하기 때문에 이러한 정보를

NPM 레지스트리에서 라이브러리를 검색하고 식별하는데 사용된다.

 

또한, 의존성 관리에도 필요한데 패키지 파일은 프로젝트에서 사용하는 다른 NPM 패키지 파일을 정의한다.

개발 및 배포 시 필요한 패키지를 자동으로 설치하고 관리하는데 필수적이다.

 

예시

{
  "name": "my-library",
  "version": "1.0.0",
  "description": "A sample npm library",
  "main": "index.js",
  "scripts": {
    "test": "mocha"
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "mocha": "^8.4.0"
  }
}

 

- npm publish

이제 NPM에 라이브러리를 배포할 수 있는 준비가 됐다. npm publish 라는 명령어를 통해 NPM에 라이브러리를 배포할 수 있다.

npm publish

 

라이브러리를 배포하기 전에 특정 명령어를 실행해야 할 수도 있다. 그럴 경우에는 package.json을 아래와 같이 수정할 수 있다.

"scripts": {
    "clean": "if exist dist rmdir /s /q dist && mkdir dist",
    "build": "tsc && rollup -c",
    "prepare": "npm run clean && npm run build",
  }

 

npm publish 명령어가 정상적으로 완료 됐을 경우, 패키지 파일의 정보에서 version을 참조하여 라이브러리가 NPM에 올라가게 된다.  배포된 라이브러리를 사용하기 위해서는 우리가 종종 사용하는 명령어를 통해서 사용할 수 있다.

npm install [package-name] (--save ,-D)

 

 

위의 내용을 바탕으로 사내에서 진행한 프로젝트를 정상적으로 NPM에 배포한 라이브러리이다.

 

이번 프로젝트를 수행하면서 CRA 환경 없이 webpack 부터 rollup.js, babel, typescript 를 적용해보았는데 정말 많은 도움이 된 것 같다. 앞으로도 회사와 개인에게 도움이 되는 프로젝트를 사내에서 진행할 수 있도록 노력해야겠다.