yalcを使って開発中のnpmパッケージを手元で確認する

ライブラリとして分離したnpmパッケージを作るときは、シンプルなものであればyarn linkでローカルファイルを参照しながら動作確認ができるのだけど、依存によってはややこしい問題が起きたりする。

例えばReactを使うライブラリだとこんなエラーが起きたりする。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

そこで登場するのがyalcというツール。yarn linkはざっくり言うとライブラリ側のディレクトリへのシンボリックリンクをアプリ側のnode_modules以下に配置するのに対して、yalcを使うとローカル(~/.yalc)にpublishしてそこをpackage.jsonで見る形にできるので、npm registryにpublishされたものを使うのに近い状態にすることができる。

使い方

1. yalcのインストール

yalc自体をインストールする。

$ yarn global add yalc

2. publish

ライブラリ側でyalc publishする。

$ cd ~/proj/mylib
$ yarn build とか
$ yalc publish

3. パッケージ追加

アプリ側でyalc addする。

$ cd ~/proj/myapp
$ yalc add @myorg/mylib
$ yarn

これで使えるようになる。package.jsonにはこんな感じのエントリが追加されている。

    "@myorg/mylib": "file:.yalc/@myorg/mylib",

4. 内容更新

中身を変えたら publish と update をする。

$ cd ~/proj/mylib
$ yarn build とか
$ yalc publish
$ cd ~/proj/myapp
$ yalc update

5. yalc remove

yalc remove --allしておしまい。

$ cd ~/proj/myapp
$ yalc remove --all
$ yarn

詳しくはyalcのGitHub (https://github.com/whitecolor/yalc)を参照。

tslint:disable を eslint-disable にするツールを雑に作った

[2021/7/8追記] tslint-to-eslint-configの作者さんから直々にコメントに対応した旨連絡頂いたので、このツールは役目を終えました。 https://github.com/sunnyone/tslint-comment-to-eslint/issues/1

TSLintからESLintに移行するには、

// tslint:disable-next-line:no-floating-promises

なんかのコメントを、

// eslint-disable-next-line @typescript-eslint/no-floating-promises

なんかに変える必要があるのだけど、ある程度機械的にできるんじゃないかと思って作った。
https://github.com/sunnyone/tslint-comment-to-eslint

使い方

使い方はこんな感じ。直接置き換えるのでgitなりできれいな状態にして実行を。

$ yarn global add tslint-comment-to-eslint
$ tslint-comment-to-eslint 'src/**/*.ts'

仕掛け

仕掛けとしては、tslint-to-eslint-config にMapが入っていたのでrequireして引いてきて、そのMapを使って正規表現置換で変えただけ。だからルール名は変わるけど、ルールの使い方が違っているとアウト（例えばmax-classes-per-fileをdisable-next-lineするには、TSLintだとそれを2回目のclassの行に使うけど、ESLintだと1行目に使う、とか）なので確認は必須。調整前にベースに使えればどうぞ。