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フォルダを作成し、好きに実装してください。

``` typescript:src/index.ts
export { default as MicroCms } from './microcms';
```

``` typescript: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を少しいじって、以下のようにします。

```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サイト**](https://www.npmjs.com/)からアカウントを作成します。
※「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のマイページ**](https://www.npmjs.com/)にアクセスして、パッケージが表示されているか確かめてみましょう。


### 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が更新されます。

```json: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:

## 4. 参考

https://qiita.com/riversun/items/29d5264480dd06c7b9fb

https://final.hateblo.jp/entry/nodejs-publish-library

http://var.blog.jp/archives/70001031.html