自作NPMパッケージを作成・公開するための手順

環境

• macOS Monterey 12.6
• Windows 11
• VSCode
• node.js v18.6.0
• npm 8.13.2
• Typescript 4.6.4

パッケージを初期化

任意のディレクトリを作成し、npm init でpackage.jsonを生成する

mkdir npm-sample-pk1
cd npm-sample-pk1 && npm init -y

mainとlicenseを以下のように修正

package.json

{
  ...
  // "main": "index.js",
  "main": "dist/index.js",
  ...
  // "license": "ISC"
  "license": "MIT"
}

サンプルのソースコードを用意する

typescriptを追加

npm install typescript

以下のソースコードを用意し、index.tsからエクスポートしておく

src\DayOfWeek.ts

export enum DayOfWeek {
    Sunday = 1,
    Monday = 2,
    Tuesday = 3,
    Wednesday = 4,
    Thursday = 5,
    Friday = 6,
    Saturday = 7,
}

src\index.ts

export * from "./DayOfWeek";

tsconfig.jsonを作成する

• declaration
  • コンパイルしたtsファイルのうち、exportしているソースの型定義ファイルを出力できるようになる
• outDir
  • コンパイル結果の出力先

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
   },
  "include": ["src/**/*.ts"]
}

コンパイルする

npx tsc

distフォルダー以下にコンパイル結果が出力される

パッケージ公開準備

package.jsonを修正する

• types
  • mainに指定したファイルに対応する型定義ファイルのパスを指定する
• files
  • パッケージに含めるファイルをホワイトリスト形式で指定する

{
  ・・・
  "types": "dist/index.d.ts", //追加
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",//追加
    "prepare": "npm run build"//追加
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "files": [
    "dist"
  ], //追加
  "dependencies": {
    "typescript": "^4.9.4"
  }
}

npmアカウント準備

以下コマンドラインで実行すると、対話式でnpmアカウントを作成できる

npm adduser

ユーザー名、パスワードなど適宜設定

すでにアカウントがある場合は、npm loginコマンドを実行してログインしておく

パッケージ公開

npm publishを実行すると、パッケージがnpm上に公開される

作成したパッケージを使用する

あとは、いつも通りnpmでパッケージをインストールして使用するだけ

npm i npm-sample-pk1

main.ts

import { DayOfWeek } from "npm-sample-pk1"
DayOfWeek.Friday

まとめ

いかがでしたでしょうか。本記事では、自作NPMパッケージを作成・公開するための手順について説明しています。ぜひ参考にしてみてください