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

はじめに

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

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

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

フォルダ構成

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

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

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した後のものをテストしたかったので以下のようにテストを修正しました。

test/index.ts

import "../lib"

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さくせい

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のトークン作成方法は以下の記事で書いているので参考にしてください。

README

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

インストール

npm install hsd-array-extension

設定

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

import "hsd-array-extension"

おわりに

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

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

参考

次の記事