Markdown 管理 CLI を作って npm パッケージ化する

• Tech
• 
  TypeScript
• 
  Markdown

ローカルリポジトリの Markdown エントリを管理する CLI を TypeScript で制作し、npm パッケージ化して公開してみました。

TypeScript ライブラリ制作の勉強の一環で、@s-inoue0108/mdcli というパッケージを作っています。このツールの紹介がてら、npm パッケージとして開発するうえで躓いた部分を忘れないうちに残しておこうと思います。

## 参考

zenn-cli という OSS をかなり参考にしました。これは Zenn↗ が提供する CLI ツールで、記事をローカルの Markdown で管理できるようになります。

今回のパッケージは、zenn-cli からプレビュー機能（フロントエンド部分）を除いた形をモデルとして開発しています。

また、パッケージングにあたってはこれらの記事を参考にしています。

npm パッケージを TypeScript で自作して公開、別モジュールからインストールして使うまでの手順

https://zenn.dev

Node パッケージ を npmjs に公開するうえで知っておくべきこと

https://zenn.dev

## tsconfig.json をつくる

今回はトランスパイル済みの JS のみを npm のリポジトリに流したいので、dist ディレクトリにビルド生成物を吐くように設定します。

"outDir": "./dist"

## npm パッケージ化する

package.json を生成して、中身をいじります。

npm init

{
  "name": "@s-inoue0108/mdcli",
  "version": "0.1.0",
  "description": "hogehoge",
  "main": "dist/mdcli.js",
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build",
  },
  "type": "module",
  "author": "Shota Inoue",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "dist"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/s-inoue0108/mdcli.git"
  },
}

一部のフィールドの説明を書いておきます。

• main
  • エントリポイントとなるファイルのパスを記述します。
• scripts
  • npm スクリプトを設定します。prepare を設定しておくと、npm install や npm publish 時に設定値のスクリプトが実行されます（publish 時にトランスパイルしてくれる）。
• files
  • npm install 時に node_modules にロードするディレクトリやファイルを指定できます（ホワイトリスト）。対照的に、.npmignore はブラックリストの役割を果たします。パッケージ使用時はトランスパイル済みの JS しかいらないためこのような設定にしています。

ひととおり設定したら、以下のコマンドでパッケージを公開します。@username で名前空間をつけてあるパッケージは access=public でのみ公開できます。

npm publish

### package.json の細かい設定

zenn-cli は npm install した直後に npx zenn init で初期化することができます。このような挙動は、エントリポイントとなる JS へのエイリアスを package.json の bin フィールドに貼ることで達成できます。

"bin": {
  "zenn": "dist/mdcli.js"
}

また、package.json はユーザー定義のフィールドを使用することもできます。

Discussions

Related Articles

Tech

Astro

TypeScript

JavaScript

Git

ブログ記事を Zenn, Qiita へエクスポートするコマンドを作る

2025/01/05

8 min

Tag