VS Codeの拡張機能開発でviteを導入する

この記事はHRBrain Advent Calendar 2024 14日目の記事です。

はじめに

yakiniku0220です。
今年から始めたVSCodeの拡張機能の開発でviteを入れたのでそのことに関して記事にしようと思いました。

VSCodeのセットアップに関しては以前記事にしているのでそちらを参考にしてみてください。

viteをinstallする

まず初めにviteをinstallします。

他のbundlerがinstallされている場合は事前に消しておくと良いです。

yarn add --dev vite vite-plugin-node

configファイルを作成する。

次にconfigファイルを作成します。
以下コードです。

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: "src/extension.ts",
      name: "extension",
      formats: ["cjs"], // CommonJS形式で出力
      fileName: () => "extension.js",
    },
    rollupOptions: {
      external: ["vscode"],
    },
    sourcemap: true,
  },
});

設定は以上です。

動作確認

実際にcompileして動かしてみます。

このような感じでWebviewにてgifが表示されたことが確認できました。

まとめ

今回はviteを導入してみましたが、導入が非常に楽でした。
今個人開発している拡張機能の方でもbundlerをviteに移行してみようと思いました。
今回作ったサンプルコードは以下にcommitしているので参考にしてみてください。

最後に

株式会社HRBrainでは新しいメンバーを募集中です。
興味がある方は下記のリンクから宜しくお願い致します。