作成したカスタム関数をライブラリとして公開する

# はじめに

こんにちは、エンジニアのkeitaMaxです。

https://qiita.com/keitaMax/private/00e0dfb74d524032a095

https://qiita.com/keitaMax/private/27f3dd4636c7e205d633

前回作成したカスタム関数をどうせならライブラリにしてみようかなということでこの記事を書いてみました。

https://qiita.com/keitaMax/items/4a4b25b1c6f1fe167fdb

やりたいことはこちらとほぼ同じなので、違う部分だけ書きます。

# フォルダ構成


```
array-extention
├─ .github/workflows
│  ├─ cu.yml
│  └─ publish.yml
├─ lib
├─ src
│  ├─ index.ts
│  └─ rules
│     └─ isEmpty.ts
├─ test
│  ├─ index.ts
│  └─ isEmpty.test.ts
├─ jest.config.js
├─ package.json
└─ tsconfig.json
```

最終的なフォルダ構成はこのような感じになりました。

# tsconfig.json
```json:tsconfig.json
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "outDir": "lib"
  },
  "include": ["src/**/*.ts"]
}
```
`"src/**/*.ts"`のフォルダ内のものを`lib`にbuildするようにしています。

# package.json
```json:package.json
{
  "name": "hsd-array-extension",
  "version": "0.0.3",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "build": "tsc",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/NiheiKeita/hsd-array-extension"
  },
  "files": [
    "lib"
  ],
  "private": false,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^29.5.14",
    "@typescript-eslint/eslint-plugin": "^8.8.1",
    "@typescript-eslint/parser": "^8.8.1",
    "eslint": "^9.12.0",
    "jest": "^29.7.0",
    "ts-jest": "^29.2.5",
    "typescript": "^5.6.3"
  }
}
```

このような感じになりました。
ライブラリの名前は`hsd-array-extension`にしました。

また、libフォルダ内にbuildするようにして、libフォルダの中をライブラリとして公開するようにしています。

# テストの修正

buildした後のものをテストしたかったので以下のようにテストを修正しました。

```ts:test/index.ts
import "../lib"
```
```yml:ci.yml
name: ci

on: [pull_request]

jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: npm install
        run: npm install
      - name: npm build  # 追加
        run: npm run build  # 追加
      - name: test
        run: npm run test
```

# publish.ymlさくせい

```yml:publish.yml
name: publish to npm
on:
  push:
    tags:
      - 'publish.v.*'

permissions:
    id-token: write
    contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '21.x'
          registry-url: 'https://registry.npmjs.org'
      - name: ci
        run: npm ci
      - name: build
        run: npm run build
      - name: test
        run: npm run test
      - run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

```

このような感じで自動でライブラリをpublishできるようにしています。

# 実行

実行方法やnpmのトークン作成方法は以下の記事で書いているので参考にしてください。

https://qiita.com/keitaMax/items/3feb1a43c24917a6ee69

# README

こんな感じでREADMEを書いてみました。

### インストール
```
npm install hsd-array-extension
```

### 設定

`_app.tsx`に以下を記述してください。


```tsx
import "hsd-array-extension"
```

# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://qiita.com/keitaMax/items/3feb1a43c24917a6ee69

# 次の記事