javascriptでvueやreactみたいなフロントエンドフレームワークを使うほどのものを書いてるわけではないのですが、さすがに excel とか pdf とかブラウザでアーダコーダするようになってくると、javascriptのコードを書く量も多くなってJavaScriptライブラリの依存関係も多くなり、こりゃいかん！ってことで、今更ながら Vite を使いだしました。

で、困った問題が一つ、jQuery 自体は、import $ from ‘jquery/dist/jquery.slim’; とかでインポートして使えるんだけど、jQueryプラグインは、ほとんどの場合 window.jQueryが存在していることが前提なので (jQuery.fn に登録する) 、いくら Vite でも、jquery ブラグインを import とかで読み込んでもエラーで使えません。

で、 インポートした jquery を window に注入して、scriptタグを生成することで何とか回避するようにしました。

以下、jQueryのHTMLエディター Trumbowyg を使用するまでの手順。

Vite で プロジェクトにディレクトリを作る。

# テンプレートに valilla を選択、jquery,bootstrap,trumbowyg をインストール
>> npm create vite@latest sample -- --template vanilla
>> cd sample
>> npm i
>> npm i jquery bootstrap trumbowyg

npm create で生成された index.html や 画像、main.js などは必要ない、というか書き換えるので削除する。

index.html,main.js を用意
とりあえず、簡易的に index.html, main.js を書く。

index.html には、最低限のものだけ、このHTMLファイルに main.js をスクリプトタグで書いておく。
bootstrapとかの読込とか、jqueryとか、ブラグインとかは全部 main.js に書いて Vite にお任せするので、html に書く必要はない。

main.js は type=module で読み込む↑↑↑
とりあえず、↓のような感じ。

開発用サーバー立ち上げとビルド処理
Viteは 開発用のwebサーバーも内蔵しているので、とにかく開発環境を構築するのはホントにラクちん。

# 開発時は以下でビルトインサーバー立ち上げ、ファイルを書き換えると瞬時に反映される。
>> npm run dev

# 公開するときは、ビルドする。デフォルトだと dist ディレクトリが作られる。
>> npm run build

# ビルドされたものを確認するためのビルトインサーバー立ち上げ
>> npm run preview

Vite自体は vue とかのフロントエンドフレームワークを使う前提なんでしょうけど、フレームワークを使わないVanillaJSやjQueryを使う小規模の開発でも簡単にはじめられるので積極的に使っていこうと思います。