Vue3 + TypeScriptでObnizを使う

はじめに

遅ればせながら Obniz で遊んでみようと思ったんですが、僕がよく使う Vue3 環境では動作せず…
調べるとQiitaにも記事はあったのですが、Obnizのバージョンが違うからなのかVueのバージョンが違うからなのか、記事を参考にしてもうまく動作しませんでした。

記事を参考に色々と挑戦してみたのですが、npm から取得したObnizSDKのコードの中にBufferを使用している箇所があり、これがどうにも解決できず…
「もしかしてnpmからインストールしたobnizはnode.jsでしか動かないのでは？(動かないようになったのでは？)」と思い、別のアプローチを試したところうまく行ったので、紹介したいと思います。

やったこと

結局、CDNで公開されているバージョンを使用する事にしました。TypeScript用の型を設定する方法はこちらを参考にしています。

obniz をインストール

型情報を取得する必要があるので、結局obnizをインストールする必要はあります。ただし、型情報だけを使うので webpack の設定でここでインストールしたobnizeは除外する事になります。

npm i -S obniz

CDNからobinzを読み込む

public/index.htmlにscriptを追加します。

index.html

<script src="https://unpkg.com/obniz/obniz.js"></script>

型を定義

src直下にobniz.d.tsを追加します。ファイル名前は何でも良いと思います。

obniz.d.ts

import _Obniz from "obniz";

declare global {
  const Obniz: _Obniz;
}

vue.config.jsを更新

npm でインストールした obniz を使用しないように、 webpack の設定に externals を追加します。

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    externals: {
      obniz: "Obniz",
    },
  },
});

使用方法

設定が終われば、後は普通に obnize を使用できると思います。

<script setup lang="ts">
import Obniz from "obniz";

const obniz = new Obniz();
obniz.on("connect", async () => {
  if (obniz.display) obniz.display.print("hello!");
});
</script>

おわりに

Obnizに限らず、「CDNで公開されているパッケージを使いたいけど、TypeScriptの型情報も使いたい」という場合には使えそうな方法だなと思います。
同じ事で悩んでいる方の時間を1msecでも短くできたなら幸いです。