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官方文档。