npm dengan Claude Code

npmpackageのpublikasi dengan Claude Code: efisiensi

自作 utilitas npmpackage sebagai publikasi い dan き、Claude Code pengaturanfile generate dari test、publikasilangkah-langkahま 一貫 サポート くれ.

初期pengaturan package

> TypeScript npmpackageproyek buatkan.
> ESM dan CJS両dukungan、型definisifileoutput、vitest dengan test。
> package名 @example/string-utils .

Claude Code generate package.json 例：

{
  "name": "@example/string-utils",
  "version": "0.1.0",
  "description": "praktisなstringutilitas集",
  "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"
  }
}

implementasi library

実際 utilitasfungsi implementasi.

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

pembuatan test

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

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

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

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

describe("template", () => {
  it("variabel 置換", () => {
    expect(template("Hello, {{name}}!", { name: "World" })).toBe("Hello, World!");
  });
});

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

tsupによるbuildpengaturan

// 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",
});

publikasilangkah-langkah

Claude Code 「npm publikasi langkah-langkah 教えて」 dan 聞く dan 、berikut langkah-langkah 案内 くれ.

# 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

Untuk CLItoolsとしてpublikasiするmetodeはCLItoolspengembanganをご覧ください。Claude Codeのefisienな使い方, lihat 生産性を3倍にする10のTips.

Summary

Dengan Claude Code, npmpackage proyek構成、ESM/CJS両dukungan pengaturan、test、publikasilangkah-langkahま 一貫 サポート 受けられ.面倒なpengaturanfile pembuatan 任せて、library 本質的な機能 pengembangan 集中 bisa dilakukan.

Untuk detail lebih lanjut, lihat Dokumentasi Resmi Claude Code.