0Pricing
Vue Academy · 강의

npm 배포와 시맨틱 버전 관리

package.json 필드(main, module, exports), 변경 기록, semantic-release와 npm publish 과정을 익힙니다.

npm 배포와 시맨틱 버전 관리은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

배포 준비하기

배포하면 npm install을 통해 라이브러리를 설치할 수 있습니다. 배포하기 전에 package.json에서 진입점을 올바르게 선언하고 어떤 파일을 배포할지 제어해야 합니다.

main과 module

main은 이전 도구를 위한 CommonJS 빌드를 가리키고, module은 최신 번들러가 트리 셰이킹 가능한 버전을 선택하도록 ESM 빌드를 가리킵니다.

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

exports 맵

최신 exports 필드는 조건부 진입점을 정의합니다. main/module보다 우선하며 하위 경로 접근을 제어합니다.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

조건부 내보내기

import, require, types 조건을 사용하면 Node와 번들러가 각각 ESM, CommonJS, TypeScript에 맞는 파일을 확인할 수 있습니다.

배포 파일 제어하기

files 필드로 배포할 항목의 허용 목록을 지정하거나 .npmignore로 차단 목록을 지정합니다. dist를 배포하고 소스와 테스트를 제외하면 패키지 크기를 작게 유지할 수 있습니다.

{
  "files": ["dist"]
}

.npmignore

차단 목록 방식을 선호한다면 .npmignore를 사용합니다. files 필드가 설정되지 않은 경우에도 파일을 제외할 수 있습니다. 둘 다 없으면 npm은 거의 모든 항목을 배포합니다.

# .npmignore
src
tests
vite.config.ts
*.log

npm pack 미리 보기

npm pack을 실행하여 타르볼을 만들고 실제로 배포될 항목을 정확히 확인합니다. 이는 공개 배포 전에 반드시 수행해야 할 중요한 안전 점검입니다.

npm pack
# inspect the listed files; nothing secret should appear

시맨틱 버전 관리

SemVer는 MAJOR.MINOR.PATCH를 사용합니다. 이전 버전과 호환되는 버그 수정에는 패치, 이전 버전과 호환되는 기능에는 마이너, 호환성을 깨뜨리는 변경에는 메이저 버전을 올립니다.

npm version 명령

npm version 명령은 package.json의 버전을 올리고 한 번에 git 태그를 생성합니다.

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

npm publish

npm publish는 패키지를 업로드합니다. 범위 지정 공개 패키지는 처음 배포할 때 --access public 플래그가 필요합니다.

npm publish --access public

prepublishOnly와 배포 태그

prepublishOnly 스크립트는 배포 전에 최신 빌드가 실행되도록 보장하며, --tag next는 latest 태그를 이동하지 않고 사전 배포 버전을 배포합니다.

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

빠른 확인

기존 사용 방식을 깨뜨리지 않고 새로운 선택적 속성을 추가했습니다. 어떤 버전을 올려야 합니까?

복습

main, module, 조건부 exports 맵(import/require/types)을 구성하고 files 또는 .npmignore로 배포 파일을 제어합니다. npm pack으로 미리 확인한 다음 npm version patch/minor/major를 사용하여 SemVer에 따라 버전을 올리고 npm publish로 배포합니다(범위 지정 패키지에는 --access public 추가).

자주 묻는 질문

“npm 배포와 시맨틱 버전 관리” 강의는 무료인가요?

네 — “npm 배포와 시맨틱 버전 관리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“npm 배포와 시맨틱 버전 관리”에서 뭘 배우나요?

package.json 필드(main, module, exports), 변경 기록, semantic-release와 npm publish 과정을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“npm 배포와 시맨틱 버전 관리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vite 라이브러리 모드 설정
  2. 컴포넌트 라이브러리의 TypeScript 선언
  3. 트리 셰이킹과 자동 가져오기
  4. npm 배포와 시맨틱 버전 관리
← Vue Academy(으)로 돌아가기