ViteをVue+Amplifyプロジェクトに導入する時に困ったこと&解決策

はじめに

Viteとは、vue-cliと比較して高速で動作するビルドツールです。
筆者はVue.jsとAmplifyを利用したプロジェクトを作成しているのですが、プロジェクトが大きくなるとともにビルド時間が掛かるようになってしまい、困っていました。そこで試しにviteを入れてビルド時間を短縮できるか試すことにしました。

困ったことと解決策

1. viteがそもそも動作しない
   amplifyモジュールが古い場合にviteを入れたことで起動しないようです。
   モジュールのアップデートを実行しましょう。

2. viteと相性が悪いモジュールが存在する
   筆者の環境ではある1つのモジュールが動作しなかっため、アンインストールしました。

3. 起動後にエラーが発生する
   筆者の環境では、コンソール上にUncaught ReferenceError: global is not defined
   というエラーが発生しました。

こちらのStackOverflowを参考に解決しました。
index.htmlに下記のコードを追加すると解決します。

<script>
  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
    env: { DEBUG: undefined },
    version: []
  };
</script>

感想＆まとめ

vite導入前は数分かかっていた起動が数秒に短縮されました。予想以上に早く、非常に可能性を感じました。
ただ、viteを導入する過程でモジュールの置き換えが必要になったことや、動作させるために準備が必要なことから、今回の導入は見送ることにしました。