Claude Code के साथ npm

npmpackageの公開को Claude Code से Efficient बनाएं

自作のutilityをnpmpackage के रूप में公開したいとき、Claude Codeはsettingsfileのgenerate सेtest、公開手順 तक一貫してサポートしてくれ है।

packageの初期settings

> TypeScriptのnpmpackageProjectを作って。
> ESMとCJS両support、type definitionsfile出力、vitestでtest。
> package名は@example/string-utils にして。

Claude Codeがgenerateするpackage.jsonの例：

{
  "name": "@example/string-utils",
  "version": "0.1.0",
  "description": "convenientな文字列utility集",
  "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"
  }
}

libraryのimplementation

実際のutilityfunctionをimplement करते हैं。

// 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;
}

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

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

testのcreate

// 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("pathカルケースを変換する", () => {
    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("variableを置換する", () => {
    expect(template("Hello, {{name}}!", { name: "World" })).toBe("Hello, World!");
  });
});

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

tsupによるbuildsettings

// 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にlogイン
npm login

# 2. buildとtest（prepublishOnlyで自動実行）
npm run build

# 3. 公開पहलेにpackage内容 confirm
npm pack --dry-run

# 4. 公開（スコープ付きpackage के case में）
npm publish --access public

# 5. versionアップ時
npm version patch  # 0.1.0 → 0.1.1
npm publish --access public

CLIツール के रूप में公開する方法はCLIツールdevelopmentदेखें。Claude Codeの効率的なuse करने का तरीकाは生産性を3倍にする10のTipsをदेखें。

Summary

Claude Code का उपयोग करके、npmpackageのProject構成、ESM/CJS両supportのsettings、test、公開手順 तक一貫してサポートが受けられ है।面倒なsettingsfileのcreateを任せて、libraryの本質的なfeaturesのdevelopmentに集मेंでき है।

विस्तार से जानने के लिएClaude Codeofficial documentationをदेखें。