TypeScriptでNodeモジュールを作成してnpm公開するまで

スポンサーリンク

0. はじめに

Nodeモジュールをnpm公開までしたことなかったなーと思い、ひまだったので備忘録として手順をまとめました。

1. Nodeモジュールを作成する

今回はmicroCMS(じゃなくてもいいけど)からデータを取得するだけの超ミニマムなNodeモジュールを作成していきます。
いい感じのフォルダを作成して、以下を実施していきます。

1-1. package.jsonを作成する

以下のコマンドを実行してpackage.jsonを作成します。
(:writing_hand:package.jsonは、Node.jsのプロジェクトが依存するパッケージ情報をまとめたファイルになります。)

> npm init

色々聞かれますが、質問内容は以下を指します。

  • package name・・・プロジェクト名
  • version・・・プロジェクトのバージョン (:writing_hand:開発段階では0.1.0とか0.0.1の方がいいかも。お好みで)
  • description・・・プロジェクトの説明
  • entry point・・・エントリポイントに指定するファイル
  • test command・・・テスト用のコマンド
  • git repository・・・GitリポジトリのURL
  • keywords・・・プロジェクトのテーマなどのキーワード
  • author・・・プロジェクトの作成者名
  • license・・・ライセンスの指定 (:writing_hand:私はMITにしてます)

1-2. TypeScriptのインストール

以下のコマンドを実行してTypeScriptのインストールを行います。
(:writing_hand:npm 5.0.0 以降からは、デフォルトでpackage.jsonに記録してくれるので「–save」オプションを指定する必要はありません。)

> npm install typescript

1-3. 「tsconfig.json」を作成する

以下のコマンドを実行してtsconfig.jsonを作成します。
(:writing_hand:tsconfig.jsonは、ビルド対象となるTypeScriptファイルを指定したり、ビルドオプションを指定したりするファイルになります。)

> ./node_modules/.bin/tsc --init

1-4. 「.npmignore」を作成する

.npmignoreという名前のファイルを作成し、以下のような感じで記述します。
(:writing_hand:.npmignoreは、npmで公開したくないファイルを指定するためのものです。.gitignore的なやつですね。)

◆.npmignore
/node_modules
/src
tsconfig.json

1-5. 使いたいnpmのインストール

必要に応じて、使いたいnpmのインストールを行います。
今回は「axios」を利用するので、以下コマンドを実行します。

> npm install axios

1-6. 実装する

srcフォルダを作成し、好きに実装してください。

◆src/index.ts
export { default as MicroCms } from './microcms';
◆src/microcms.js
import axios from 'axios'

export default class MicroCms {

  static async getData (url:string, apikey:string) {
    const headers = { headers:{ "X-API-KEY": apikey } };
    const  { data } = await axios.get(url, headers);
    return data.contents;
  }

}

1-7. package.jsonの修正

package.jsonを少しいじって、以下のようにします。

◆package.json
{
  "name": "@i-tanaka730/microcms-npm",
  "version": "0.0.1",
  "description": "It is a service to access the data of microcms.",
  "main": "index.js",
  "types": "index.d.ts", // ★追加:TypeScriptのルート
  "scripts": {
    "build": "tsc", // ★追加:TypeScriptのビルド設定
    "prepare": "npm run build", // ★追加:nodeモジュール公開時に自動でビルドする
    "test": "echo\"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/i-tanaka730/microcms-npm.git"
  },
  "author": "i-tanaka730",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/i-tanaka730/microcms-npm/issues"
  },
  "homepage": "https://github.com/i-tanaka730/microcms-npm#readme",
  "dependencies": {
    "axios": "^0.21.1",
    "typescript": "^4.3.2"
  }
}

2. npm公開する

よし、元気に公開していきます。動作確認はしなi

2-1. npmアカウントを作成する

npmアカウントをまだ作成していない場合は、npmサイトからアカウントを作成します。
※「Username」「Password」「Email」をこのあと使用するので覚えておきましょう。

2-2. ユーザーを登録する

続いて、ユーザーを登録するため、以下のコマンドを実行します。

> npm adduser

「Username」「Password」「Email」を入力し、成功すれば以下のようなメッセージが表示されるかと思います。

Logged in as {Username} on https://registry.npmjs.org/.

2-3. npm公開!

なんともうnpmを公開できます。手順が短い!すばらしい!
以下のコマンドを実行します。

> npm publish

成功すれば以下のようなメッセージが表示されるかと思います。

npm notice 
npm notice 📦  @i-tanaka730/microcms-npm@0.0.1
npm notice === Tarball Contents ===
npm notice 1.1kB LICENSE
(省略)
npm notice === Tarball Details ===
npm notice name:          @i-tanaka730/microcms-npm
(省略)
npm notice
+ @i-tanaka730/microcms-npm@0.0.1

npmのマイページにアクセスして、パッケージが表示されているか確かめてみましょう。

2-4. 補足

2-4-1. パッケージのバージョンを上げる

パッケージのバージョンを上げるには、以下のコマンドを実行します。

// パッチバージョンを上げる(0.0.1 → 0.0.2)
> npm version patch

// マイナーバージョンを上げる(0.0.1 → 0.1.0)
> npm version minor

// メジャーバージョンを上げる(0.0.1 → 1.0.0)
> npm version major

上記のコマンド実行することで、package.jsonのversionが更新されます。

◆package.json
{
  "name": "@i-tanaka730/microcms-npm",
  "version": "0.0.2", // ★ここ
  (省略)
}

2-4-2. パッケージを再公開する

パッケージを再公開する場合も公開と同様、以下のコマンドでOKです。

> npm publish

しかし、再公開前にパッケージのバージョン上げないといけません。
バージョンを上げずにnpm publishした場合、以下のようなエラーになります。

npm ERR! code E400
npm ERR! 400 Bad Request - PUT https://registry.npmjs.org/@i-tanaka730/microcms-npm - Cannot publish over previously published version "0.0.1".

2-4-3. パッケージを非公開にする

指定のバージョンのパッケージを非公開にするには以下のコマンドを実行します。

> npm unpublish xxxxxx@0.0.1

全バージョンのパッケージを非公開にするには以下のコマンドを実行します。

> npm unpublish xxxxxx --force

3. おわりに

公開自体は結構簡単にできるみたいですね:innocent:
いい感じのNodeモジュールを思いついたら、実装して公開してみたいと思います:innocent:

コメント

タイトルとURLをコピーしました