Vue3のSFCファイル(.vueファイル)用のesbuildプラグインを作りました

vue3のSFCファイル(.vueファイル)用のプラグインが見つからなかったので、プラグインを作成しました。
一般的にはvueでesbuildを使いたい場合はviteを使えば良いと思うのですが、いくつかの事情¹からviteを使いたくない場合があると思うので、このプラグインはそういう方向けです。

機能

esbuildでvueファイルがバンドルできるようになります。内部的にはplugin-vue(viteのプラグイン)を使っているので、実験的機能である <script setup>(RFC)にも対応しています。

インストール

esbuild と共に、esbuild-plugin-vue-iii をインストールします。

npm i -D esbuild esbuild-plugin-vue-iii

使い方

一般的な esbuild のプラグインの使い方と同じです。

const build = require('esbuild').build;
const vue3Plugin = require('esbuild-plugin-vue-iii').vue3Plugin;

build({
  entryPoints: ['index.ts'],
  bundle: true,
  outdir: 'dist',
  plugins: [vue3Plugin()],
}).catch(() => process.exit(1));

未サポートの機能

1. Pre-Processors
2. CSS Modules
3. Template Static Asset Reference
4. Custom Blocks
5. SFC Src Imports
6. Source Map

3.と6.は対応する予定ですが、それ以外は対応するか未定です。

• CommonJs を使ったライブラリが使えない場合がある(issue#162)
• Web Worker がFireFoxで動かない（例えばmonacoの機能が一部機能しない）(issue#2493)
• 小さいプロジェクトなのでvite使うまでもない

1. viteを使いたくない例 ↩