npmパッケージを公開してみた話

# これはなに？
npmパッケージを公開したので、感想だったりメモだったり

# やった理由
業務でパッケージをインストールしたときに、いつもなんとなく叩いてるけど、公開する側ってどんな感じなんだろうと思い

# そもそもnpmって？
Node.jsには、プログラムのかたまりをパッケージという単位にまとめて配布されている
パッケージの検索やインストール、バージョンなどを管理できるのがnpm

# 作った物
　呼び出すと hello の文字列が返される使い道に困るもの

# 作業工程
## npmのアカウントを作る

```
npm adduser
```
上記のコマンド叩いて吐き出されたURLにアクセスして、アカウント作成
その後は勝手にログインされてた

## モジュールを作成する
githubに上げておけばよかった。。。
### 初期設定
```bash

$ mkdir npm-package-pagination // デフォルトのパッケージ名になる
$ npm init --scope=t_raku // 後述
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (@t_raku/npm-package-hello)  // scopeをつけたことで@t_raku/ディレクトリ名になっている
version: (1.0.0) 0.1.0 // バージョンは変更、詳細は後述
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: t_raku
license: (ISC) MIT // 後述
About to write to /Users/raku/repos/npm-package-hello/package.json:

{
  "name": "@t_raku/npm-package-hello",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "t_raku",
  "license": "MIT"
}

```

- scope
    - パッケージ名が汎用的だと、既存に存在しているパッケージとぶつかって公開できない可能性があるからつけた方が良さそう
- version
    - セマンティックバージョニングなるものに従う必要があるらしい
    - 自分はメジャー、マイナー、パッチくらいしかわからない。。。
    - 簡単に言うと破壊的なアップデートを行う時はメジャーバージョンを上げる必要があり、12.n.mみたいにバージョンがすごいことになる
    - メジャーバージョンが0だと破壊的なアップデートいいらしい？
- license
    - OSSライセンス
    - ほとんど理解できてないから詳しい人いたら聞きたみ

### モジュールを実装
```Hello.ts
export const hello = (): string => 'hello'
```

```index.ts
export * from './Hello'
```

### TypeScriptを入れる

```bash
$ npm install typescript

added 1 package, and audited 2 packages in 2s

found 0 vulnerabilities
$ npx tsc --init // 初期化

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig
```

tsconfigに追記
```tsconfig.json
{
  "compilerOptions": {
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
  },
  "include": ["src/**/*.ts"]
}
```

### コンパイル
```bash
$ npx tsc
$ ls dist
Hello.d.ts    Hello.js      Hello.js.map  index.d.ts    index.js      index.js.map
```

## 公開準備
.npmignoreの作成
利用するのはdist配下なので、srcなどは不要
```.npmignore
/node_modules
/src
tsconfig.json
```

package.jsonの修正
```package.json
{
  "name": "@t_raku/npm-package-hello",
  "version": "0.1.0",
  "description": "",
  "main": "dist/index.ts", // 修正
  "types": "dist/index.d.ts", // 追加
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc", // 追加
    "pr![スクリーンショット 2023-11-15 22.04.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/eb6ff671-71b4-c1f3-763f-cc0e6f4c4200.png)
epare": "npm run build" // 追加
  },
  "author": "t_raku",
  "license": "MIT",
  "dependencies": {
    "typescript": "^5.2.2"
  }
}

```

## 公開
下記のコマンドを叩く

```
npm publish --access=public
```
スコープを設定している場合 `--access`オプションが必要らしい（そのうち詳しく調べる）



## 使ってみる(ここからは書く必要ないかもだけど)
#### TSが動く環境を作る
　![スクリーンショット 2023-11-15 22.03.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/98b0e705-7ab6-af56-088e-19a5d8c6b793.png)

#### 公開したパッケージをインストール
![スクリーンショット 2023-11-15 22.22.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/9f9f5e09-26aa-c05c-7f0a-2739f9ccc064.png)


#### コンソールに表示する処理を書く
```app.ts
import { hello } from "@t_raku/npm-package-hello";

console.log(hello())
```
#### 実行してみる
![スクリーンショット 2023-11-15 22.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/1e800d4f-8771-904f-d907-bad3d8ef0fdf.png)

でけた

# おまけ
公開したタイミングでページが作られるらしい
https://www.npmjs.com/package/@t_raku/npm-package-hello

# 感想
- 大した機能ではないけど思ったよりスムーズに公開できて驚いている
    - パッケージの中で別パッケージ使うとかだと少し大変そう
- 今回はパッケージの公開までを主にしていたので、次は普通に使えそうな物を作ってみる
- なんとなく公開した状態なので全てを理解しきれてない感
- バージョンやライセンスとかも少し身につけた方が良いのかなと思った
- githubのリポジトリに上げよう（そのうち）