✅ GitHub Packages (npm) 사용 가이드 - sssssubin/common-front GitHub Wiki

1. Personal Access Token 생성

2. 패키지 프로젝트 설정

📦 package.json 예시

{
  "name": "@sssssubin/common-front",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.es.js",
  "style": "dist/style.css",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js",
      "style": "./dist/style.css"
    }
  },
  "type": "module",
  "files": ["dist"],
  "scripts": {
    "build": "vite build",
    "prepublishOnly": "npm run build",
    "release": "npm version patch && npm publish --registry=https://npm.pkg.github.com"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/sssssubin/common-front.git"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "sass-embedded": "^1.89.0",
    "vite": "^5.0.0",
    "vue": "^3.5.15"
  }
}

🔧 .npmrc 설정 (패키지 루트)

@sssssubin:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=ghp_YourPersonalAccessToken

⚠️ ghp_YourPersonalAccessToken 부분은 실제 토큰으로 대체하세요.

⚙️ vite.config.js 예시

import { fileURLToPath } from "node:url";
import { dirname, resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export default defineConfig({
  plugins: [vue()],
  build: {
    target: "node18",
    lib: {
      entry: resolve(__dirname, "src/index.js"),
      name: "CommonFront",
      formats: ["es", "cjs"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue"
        }
      }
    }
  }
});

📁 index.js 예시

import SalesTable from "./components/SalesTable.vue";
import "./components/SalesTable.scss";

export { SalesTable };

3. 패키지 업로드 (Publish)

npm login --registry=https://npm.pkg.github.com/
# Username: GitHub 사용자명
# Password: GitHub Personal Access Token
# Email: GitHub 계정 이메일

npm run release

4. 다른 프로젝트에서 패키지 설치 및 사용

📄 .npmrc 설정 (사용 프로젝트 루트)

@sssssubin:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=ghp_YourPersonalAccessToken

📦 설치

npm install @sssssubin/common-front

✅ 사용 예시

import { SalesTable } from '@sssssubin/common-front';
import '@common-front/style.css';