monorepo環境でVSCode拡張機能を作る
monorepo 環境でライブラリと VSCode 拡張機能を作ったので、有用そうなものを紹介します。
作ったものは以下のリポジトリに置いています。細かい紹介は個人ブログに書いています。
構成
- pnpm
- turborepo
- changesets
changets はバージョン名の更新のためだけに使って、公開はpnpm -r publish
でやっています。
turbo は next.js をよく使うので、Vercel 繋がりということで使っています。今のところいい感じです。
pnpm で vsce を使うときの問題
VSCode 拡張機能を開発するために使う CLI である vsce を pnpm で使うとnpm ERR! missing:
が表示されてビルド出来ません。
ビルド時に--no-dependencies
オプションを付けるとエラーは無くなりますが、パッケージに依存ライブラリが同梱されなくなります。
この問題にぶつかって一時的に yarn workspace を試していたのですが、こちらはルートの node_modules を見に行ってくれず依存ライブラリが同梱されないようです。
解決策
パッケージに依存ライブラリをバンドルした上で、ビルド時に--no-dependencies
オプションを付けることにしました。
esbuild によるバンドルは公式ドキュメントにも記載されています。
ビルド用コマンドは以下のようにすると良いようです。
"vscode:prepublish": "npm run esbuild-base -- --minify",
"esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node",
パッケージ作成と公開のコマンドは以下のようにしました。
"package": "pnpm vsce package --no-dependencies",
"release": "pnpm vsce publish --no-dependencies"
GitHub Action で自動的に VSCode 拡張機能を公開する
公式ドキュメントは以下の通りです。
vsce publish
は現在のバージョン名のパッケージがすでに公開されている場合にエラーで終了するので、バージョン名が変化した時だけ実行するようにしてみました。
- name: Publish blogview-vscode
run: |
cd packages/blogview-vscode
PUBLISHED=$(pnpm vsce search blogview-vscode --json | jq -r '.[].versions[0].version')
CURRENT=$(cat package.json | jq -r '.version')
if [ "$PUBLISHED" != "$CURRENT" ]; then
pnpm release -- -p "$VSCE_TOKEN"
fi
env:
VSCE_TOKEN: ${{ secrets.VSCE_TOKEN }}
vsce search
で公開したい拡張機能を検索します。
検索結果から、GitHub Actions のubuntu-latest
に標準で入っているjq
で現在のバージョン名を取り出します。
取得したバージョン名を package.json の値と比較しています。
おわり
monorepo で VSCode 拡張機能を作ってみて有用そうなものを紹介しました。
参考になればうれしいです。終わります。
Discussion