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的なやつですね。)
/node_modules
/src
tsconfig.json
1-5. 使いたいnpmのインストール
必要に応じて、使いたいnpmのインストールを行います。 今回は「axios」を利用するので、以下コマンドを実行します。
> npm install axios
1-6. 実装する
srcフォルダを作成し、好きに実装してください。
export { default as MicroCms } from './microcms';
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を少しいじって、以下のようにします。
{
"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が更新されます。
{
"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:
4. 参考
https://qiita.com/riversun/items/29d5264480dd06c7b9fb