sentimental programmer: bun

claude code 에서 스킬을 만들어 공유할때 보통 플러그인을 만드는데 skill.md 외 .claude-plugin/{marketplace.json,plugin.json} 을 만들어 버전,키워드등의 메타 데이터를 작성해야 한다.

그런데 최근 vercel 에서 오픈한 https://www.skills.sh 을 보면 그냥 skill.md 만 생성하고 별도의 .json 같은 파일을 필요로 하지 않는다.

마켓에 올리는 것이 아니니 별도의 심사가 없고 스킬이 있는 깃헙 저장소 자체의 버전이 되는 것이다.

claude code 플러그인은 설치하면 ~/.claude/plugin/ 에 추가되는 반면 skills 로 설치하면 사용자 로컬 ~/.claude/skills/ 에 일반 로컬 스킬로 추가된다

skills.sh 은 json 매니페스트를 복잡하게 구성할 필요 없이 .md 상단의 frontmatter 만으로 충분하다.

# 사용 예 (난 npx 보단 bunx 을 선호한다.)

# 특정 브랜치 지정해서 설치(디폴트는 main, HEAD)

bunx skills add my-org/my-skills#develop

# 특정 태그 지정해서 설치

bunx skills add my-org/my-skills#v1.2.0

# 특정 커밋 해시를 지정해서 설치

bunx skills add my-org/my-skills#a1b2c3d

# 다음과 같이 특정 저장소 경로를 명시해서 설치할 수도 있다.

bunx skills add https://github.com/ysoftman/myenv/tree/main/.claude/skills

# https://github.com/Leonxlnx/taste-skill 설치 예시

bunx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

요즘은 yarn 대신 bun(https://github.com/oven-sh/bun) 을 쓰게 된다.(예전에 bower -> yarn 으로 바뀐지가 몇년 되지 않은것 같은데 트렌드가 참 빠르다.)

그리고 webpack 대신 vite(https://github.com/vitejs/vite) 쓰게 된다.

둘의 공통점을 빠르다(여기엔 효율적이다라는 의미도 포함된다. 예로 webpack 처럼 모든것 다시 번들링하는게 아닌 필요한 부분만 하는등)

bun 그냥 설치만 하면 사용방법도 yarn 과 거의 같아서 별 신경쓸게 없다.

그런데 webpack, vite 은 각각 설정 파일이 있고 다르다.

webpack 설정 -> vite 설정을 만들어 보자.

# vite 설치(package.json 에도 vite 가 명시된다.)

bun install vite vite-plugin-node @vitejs/plugin-react @babel/core babel-preset-env --save-dev

# 참고 새로운 프로젝트를 만들때는 프로젝트 이름의 디렉토리에 전체 설정들이 생성된다.

bun create vite

# 이미 프로젝트가 있는 상태

# 다음과 vite.config.js 파일을 만들고 수정하거나 변경되는 부분을 수정하거나

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

export default defineConfig({

plugins: [react()],

resolve: {

alias: {

'@': '/src',

})

# 아니면 webpack.config.js chat-gpt 같은 LLM에서 변환시키면 편하다.

# webpack -> vite 변경되는 설정들

webpack vite

babel-loader 필요 없음 (ESBuild로 기본 트랜스파일링)

style-loader 기본 지원

css-loader, sass-loader 필요 시 bun install sass --save-dev 설치

file-loader, url-loader 기본 지원

html-webpack-plugin 필요 없음

# webpack -> vite 변경되는 코드들

webpack vite

process.env.NODE_ENV import.meta.env.MODE

require() import (ECMAScript Modules(ESM) JavaScript의 공식 모듈 시스템)

require.context() 지원 안됨

# 클라이언트 번들링은 webpack, vite 둘다 된다.

# 서버 번들링은

# webpack.config.js 설정으로 target: "node" 명시하면되지만

# vite 는 기본적으로 안되고 vite-plugin-node 같은 플러그인을 이용해야 한다.

skill.sh(Vercel Agent Skills Ecosystem)

migrate webpack to vite