npmパッケージの公開方法

NPMパッケージを作って公開することで、ポートフォリオの強化もできて、便利なコードをコミュニティと共有できる。この間、自分の初めてのNPMパッケージを、漫画ビューアー（github.com/Mangatsu/mangatsu-reader）を、まだ完全にα版みたいなものではあるが、作って公開した。このガイドでは、TypeScriptプロジェクトのリポジトリをセットアップして、便利なリンティングツールを使う設定、最後にパッケージをNPMに公開する方法を説明するよ。

前提条件

npm v10.0.0以上
ネット接続

ステップ 0: ライセンスを選ぶ

npmパッケージの場合、MIT（またはISC）がシンプルで使いやすいからおすすめ。でも、使い方によってはApache 2.0（特許付き）や(A)GPL 3.0みたいな強力なコピーレフトライセンスが合うかも。LICENSE（もしくはCOPYING）ファイルを作成するのを忘れないように！

ステップ 1: NPMパッケージのセットアップ

NPMパッケージの初期化: プロジェクト用のディレクトリを作って移動してから、npm initでプロジェクトを初期化する。
```
mkdir name-of-the-package
cd name-of-the-package
npm init -y
```
これでデフォルト設定の package.json ファイルが生成される。
gitの初期化: git init でGitを初期化して、.gitignoreファイルを作成。
TypeScriptと関連する依存パッケージのインストール: TypeScriptや型定義、クリーンアップ用の rimraf をインストール。
```
npm install --save-dev typescript @types/node rimraf
```

TypeScript設定の作成: tsconfig.jsonファイルを作成して、TypeScriptの設定を行う。

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["node", "react"],
    "jsx": "react",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": false,
    "resolveJsonModule": true,
    "allowJs": false,
    "declaration": true,
    "outDir": "./lib",
    "declarationDir": "./lib",
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "lib"]
}

この設定で、src ディレクトリからファイルをコンパイルして、libディレクトリに出力される。

ステップ 2: リンティングの設定（ESLint、Prettier、Husky）

開発依存パッケージのインストール:

npm install --save-dev prettier eslint prettier-eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

設定ファイルの作成: eslint.config.mjs:

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": false,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 120,
  "endOfLine": "lf"
}

（オプション） Huskyのプレコミットフックで自動リンティングを設定

Huskyとlint-stagedのインストール:

npm install --save-dev husky lint-staged
npx husky install

lint-stagedの設定: PrettierとESLintをコミット前に実行する設定を追加する。package.jsonに以下を追加。

"lint-staged": {
  "*.{ts,tsx,js,jsx}": "eslint --cache --fix",
  "*.{ts,tsx,js,jsx,css,md}": "prettier --write"
}

"scripts": {
  "prepare": "husky"
}

プレコミットフックの追加:

echo "npx lint-staged" > .husky/pre-commit

ステップ 3: ビルドプロセスの設定

ビルドスクリプトの更新: package.json に tsc, clean, build コマンドを追加。
```
"scripts": {
  "tsc": "tsc -p tsconfig.json",
  "clean": "rimraf lib && rimraf build",
  "build": "npm run clean && npm run tsc"
}
```
npm run build で src から lib ディレクトリにTypeScriptファイルがコンパイルされる。
ビルド後にアセットをコピー: パッケージに画像やJSONなどの非TypeScriptファイルが含まれている場合、次のスクリプトを追加してそれらを lib フォルダにコピーする。
```
"scripts": {
  "copy-assets": "node -e \"require('fs').cpSync('./src/assets', './lib/assets', {recursive: true});\"",
}
```

最終ビルドコマンド:

"scripts": {
  "build": "npm run clean && npm run tsc && npm run copy-assets"
}

ステップ 4: npmパッケージの公開

NPMにログイン: npm login

package.jsonのメタデータを更新: package.jsonに、名前、バージョン、説明、メイン、ライセンス、ファイルフィールドを追加。ファイルフィールドでパッケージに含まれるファイルを指定する。

{
  "name": "name-of-the-package",
  "version": "0.1.0",
  "description": "",
  "main": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "type": "module",
  "files": [
    "lib/"
  ],
  "repository": {
    "type": "git",
    "url": "github.com/<user,org>/<name-of-the-package>"
  },
  "keywords": [
    "typescript"
  ],
  "author": "Marko Kristian Leinikka",
  "license": "MIT"
}

パッケージを公開: npm publish。初回公開時には npm publish --access public でパッケージを公開することができる。

まとめ

これで、リンティング、フォーマット、プレコミットフック、アセットコピーを含むビルドプロセスを備えたTypeScript NPMパッケージが作成できた。ユーティリティ関数やライブラリを公開するとき、このセットアップがスムーズなワークフローと高品質なコードを維持するのに役立つ。

このガイドに沿って、TypeScriptパッケージをNPMに自信を持って公開し、綺麗でメンテナンスしやすいコードベースを管理できるようになるはず。

執筆Marko Leinikka

2024年9月1日

文字数：3316

5分で読めます