Zenn
🍴

ローカル開発環境で検証時に使用するTSライブラリ作成テンプレ作った

2024/01/19に公開1件
TypeScript
pnpm
tech

はじめに

ローカル開発環境（以下、ローカル）で検証する際に、一部の機能をライブラリとして切り出しておくためのリポジトリ作った。npmで公開しないようにするためにpackage.jsonのprivateフィールドはtrueにしている。テンプレートリポジトリ化しているので、ライブラリを作る際は複製して使うよろし。

対象読者

  • ローカルで検証時にぽちぽちライブラリ作りたい人
  • pnpm使ってる人
    • 下記にpmpn linkを使う方法を記載しているが、npmでも同じことできるので必要あれば適宜読み替えてください

作ったもの

ほい。
https://github.com/kkznch/template-making-library/tree/publish-zenn-2024-01-19

使用例

pnpm linkを使ってローカルからアクセス可能にする方法と、pnpmのworkspaceを使ってアクセスする例をそれぞれ記載する。

pnpm linkを使う場合

pnpm linkを実行することで、ローカルでシステム全体や特定の場所からアクセス可能にすることができる。
https://pnpm.io/ja/cli/link

想定する構成

下記のように、hogeパッケージとfugaパッケージが同階層にある。

.
├── hoge （ライブラリをexportする側）
└── fuga （ライブラリをimportする側）

手順

手順は下記の通り。

  1. 著者のライブラリ作成テンプレをテンプレートとしてhogeリポジトリを作成し、ローカルにcloneする
  2. hogeパッケージの準備（ライブラリをexportする側）
    1. package.jsonのnameフィールドを自分のライブラリ名（今回はhoge）にする
    2. vite.config.tsのbuild.lib.nameフィールドを自分のライブラリ名（今回はhoge）にする
    3. src/index.tsに良い感じのコードを書く
    4. pnpm buildを実行する
  3. fugaパッケージの準備（ライブラリをimportする側）
    1. fugaパッケージ直下でpnpm initを実行し、package.jsonを作る
  4. hogeパッケージ直下で下記のコマンドを実行する
    $ pnpm link --dir ../fuga

上記手順を実行すると、fugaパッケージのnode_modulesにhogeパッケージへの参照が作られ、fugaパッケージからhogeパッケージをインポートすることができる。

補足

pnpm link --globalを実行するとシステム全体でライブラリへのアクセスが可能になるらしいが、下記エラーが発生するため実行できない。

$ pnpm link --global
 WARN  link:/to/hoge has no binaries

GitHubのpnpmリポジトリを見ると下記のIssueがあった。
https://github.com/pnpm/pnpm/issues/7511

使うか分からないけど使えると便利そうな気はするので直ってくれると嬉しい。

pnpmのworkspaceを使う場合

pnpmのworkspaceを使い、workspace内のパッケージを指定してライブラリへアクセスが可能になる。
https://pnpm.io/ja/workspaces

想定する構成

下記のように、workspaceのルートとなるproject-rootパッケージの下に、hogeとfugaがそれぞれパッケージとして存在する。

.
└── project-root （workspaceのルート）
    ├── hoge （ライブラリをexportする側）
    └── fuga （ライブラリをimportする側）

手順

手順は下記の通り。

  1. project-rootパッケージの準備（workspaceのルート）
    1. project-rootパッケージ直下でpnpm initを実行し、package.jsonを作る
    2. project-rootパッケージ直下でpnpm-workspace.yamlを下記の内容で作成する
      phpm-workspace.yaml
      packages:
    - 'hoge'
    - 'fuga'
  2. hogeパッケージの準備（ライブラリをexportする側）
    1. project-rootパッケージ直下に著者のライブラリ作成テンプレをhogeという名前でcloneする
    2. hoge/package.jsonのnameフィールドを自分のライブラリ名（今回はhoge）にする
    3. hoge/vite.config.tsのbuild.lib.nameフィールドを自分のライブラリ名（今回はhoge）にする
    4. hoge/src/index.tsに良い感じのコードを書く
  3. fugaパッケージの準備（ライブラリをimportする側）
    1. fugaパッケージ直下でpnpm initを実行し、package.jsonを作る
  4. hogeパッケージのビルド
    1. project-rootパッケージ直下でpnpm installを実行する（project-root, hoge, fugaのそれぞれのpackage.jsonに記述されたパッケージが良い感じにインストールされる）
    2. project-rootパッケージ直下でpnpm -F hoge buildを実行し、hogeパッケージをビルドする
  5. fugaパッケージにhogeパッケージをインストール
    1. project-rootパッケージ直下でpnpm -F fuga add hogeを実行する

上記手順を実行すると、fugaパッケージのnode_modulesにhogeパッケージへの参照が作られ、fugaパッケージからhogeパッケージをインポートすることができる。

おわりに

ライブラリ作るときに毎回あれこれインストールして設定ファイル書いてとするのが面倒だったので、今回テンプレを用意した。主に検証時に使用するためのものだが、必要あればpackage.jsonの設定を書き換えてnpmにpublishできるようにすることもできるはず。

みんなライブラリ作るときどうしてるんだろうね。

Discussion