✅ GitHub Packages (npm) 사용 가이드 - sssssubin/common-front GitHub Wiki
1. Personal Access Token 생성
- GitHub에서 Personal Access Token(PAT)을 생성합니다.
- 참고: http://dev-panda.tistory.com/28
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';