npm: Claude Code 활용 가이드

npm패키지の公開をClaude Code로 효율화하기

自作のユーティリティをnpm패키지로서公開したいとき、Claude Code는 설정파일の생성から테스트、公開手順まで一貫してサポートしてくれます。

패키지の初期설정

> TypeScriptのnpm패키지프로젝트を作って。
> ESMとCJS両대응、타입定義파일출력、vitestで테스트。
> 패키지名は@example/string-utils にして。

Claude Code가 생성するpackage.jsonの例：

{
  "name": "@example/string-utils",
  "version": "0.1.0",
  "description": "便利な文字列ユーティリティ集",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    }
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "test": "vitest run",
    "test:watch": "vitest",
    "lint": "eslint src/",
    "prepublishOnly": "npm run lint && npm run test && npm run build"
  },
  "keywords": ["string", "utils", "typescript"],
  "license": "MIT",
  "devDependencies": {
    "tsup": "^8.0.0",
    "typescript": "^5.4.0",
    "vitest": "^1.6.0"
  }
}

라이브러리の구현

実際のユーティリティ함수を구현します。

// src/index.ts

/**
 * 文字列をキャメルケースに変換する
 */
export function toCamelCase(str: string): string {
  return str
    .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""))
    .replace(/^[A-Z]/, (c) => c.toLowerCase());
}

/**
 * 文字列をケバブケースに変換する
 */
export function toKebabCase(str: string): string {
  return str
    .replace(/([a-z])([A-Z])/g, "$1-$2")
    .replace(/[\s_]+/g, "-")
    .toLowerCase();
}

/**
 * 文字列を指定の長さで切り詰める
 */
export function truncate(str: string, maxLength: number, suffix = "..."): string {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength - suffix.length) + suffix;
}

/**
 * テンプレート文字列を変数で置換する
 */
export function template(str: string, vars: Record<string, string>): string {
  return str.replace(/\{\{(\w+)\}\}/g, (_, key) => vars[key] ?? "");
}

/**
 * 文字列のバイト数を取得する（UTF-8）
 */
export function byteLength(str: string): number {
  return new TextEncoder().encode(str).length;
}

테스트の생성

// src/index.test.ts
import { describe, it, expect } from "vitest";
import { toCamelCase, toKebabCase, truncate, template, byteLength } from "./index";

describe("toCamelCase", () => {
  it("ケバブケースを変換する", () => {
    expect(toCamelCase("hello-world")).toBe("helloWorld");
  });
  it("スネークケースを変換する", () => {
    expect(toCamelCase("hello_world")).toBe("helloWorld");
  });
  it("スペース区切りを変換する", () => {
    expect(toCamelCase("hello world")).toBe("helloWorld");
  });
});

describe("toKebabCase", () => {
  it("キャメルケースを変換する", () => {
    expect(toKebabCase("helloWorld")).toBe("hello-world");
  });
  it("パスカルケースを変換する", () => {
    expect(toKebabCase("HelloWorld")).toBe("hello-world");
  });
});

describe("truncate", () => {
  it("長い文字列を切り詰める", () => {
    expect(truncate("Hello, World!", 8)).toBe("Hello...");
  });
  it("短い文字列はそのまま返す", () => {
    expect(truncate("Hi", 10)).toBe("Hi");
  });
});

describe("template", () => {
  it("変数を置換する", () => {
    expect(template("Hello, {{name}}!", { name: "World" })).toBe("Hello, World!");
  });
});

describe("byteLength", () => {
  it("ASCII文字のバイト数", () => {
    expect(byteLength("hello")).toBe(5);
  });
  it("日本語文字のバイト数", () => {
    expect(byteLength("あ")).toBe(3);
  });
});

tsup에 의한빌드설정

// tsup.config.ts
import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["src/index.ts"],
  format: ["cjs", "esm"],
  dts: true,
  clean: true,
  sourcemap: true,
  minify: false,
  target: "es2020",
});

公開手順

Claude Code에「npmに公開する手順を教えて」と聞くと、다음의手順を案内してくれます。

# 1. npmにログイン
npm login

# 2. ビルドとテスト（prepublishOnlyで自動実行）
npm run build

# 3. 公開前にパッケージ内容を確認
npm pack --dry-run

# 4. 公開（スコープ付きパッケージの場合）
npm publish --access public

# 5. バージョンアップ時
npm version patch  # 0.1.0 → 0.1.1
npm publish --access public

CLIツール로서公開する方法はCLIツール개발를 확인하세요.Claude Codeの効率的な使い方は生産性を3倍にする10のTips를 참고하세요.

정리

Claude Code를 활용하면 npm패키지の프로젝트구성、ESM/CJS両대응の설정、테스트、公開手順まで一貫してサポートが受けられます。面倒な설정파일の생성を任せて、라이브러리の本質的な機能の개발に集中할 수 있습니다。

자세한 내용은Claude Code공식 문서를 참고하세요.