Blog

2023年1月24日

Astro(というかVite)でglslifyを使う

Astroは内部にViteが使われていて、Astroが必要な高度な設定をサポートしています。

Astroで標準サポートしてなくても、Viteのプラグインが使えたりするのでいろいろ便利そうな感じなのですが、
今回Viteでもサポートしているのかしてないのかわからず、事例もほとんどないので2日を要するハマり具合でした。

やりたかったのは、glslの中でglslifyプリプロセッサ構文を書くということ。

下記のような構文です。

#pragma glslify: blendOverlay = require(glsl-blend/overlay)

jsからglslを読み込むのではなく、glslファイルからglslを読み込む方法です。

'glslify' : unrecognized pragmaというエラー。glslifyのところが処理されないです。

結論から。vite-plugin-glslifyを使う

Github：vite-plugin-glslify

vite-plugin-glslifyをインストールする。

npm i vite-plugin-glslify

ですが、npmでインストールするとviteのバージョンが合わないみたいなエラーが出てインストールに失敗しました。

そんな時はyarnでインストールします。

yarn add vite-plugin-glslify

この、npmのインストールでだめならyarnで…というのは過去にも一度遭遇したことがありますが、yarnはパッケージのバージョンの衝突をうまいことやってくれるのでしょうか…？ありがたいですね。でもちょっとわかっておりません。。

astro.config.mjsには下記設定を追加します。
（viteの場合は、vite:{}以下をvite.config.jsに書けば多分いける）

import glslify from "vite-plugin-glslify";

export default defineConfig({
  vite: {
    plugins: [
      glslify(),
    ],
  }
}

astroでglslを読み込むだけならvite-plugin-glslでも

astroでglslを使うだけなら、vite-plugin-glslというプラグインも使えます。
ただ、vite-plugin-glslifyを使えばこの機能も兼ねるので、特段これを使用する理由は今の所ないかもしれない…が、なんだかこっちの方がメジャーな気がするし、glslifyを使うまではこれでやっていたので一応書いておきます。

astro.config.mjsの設定
（viteの場合はvite:{}以下から指定すれば多分いけます）

import glsl from "vite-plugin-glsl";

export default defineConfig({
  vite: {
    plugins: [
      glsl({
        watch: false,
      }),
    ],
  }
}

watchはfalseにしておかないと、astroのなにかと衝突するのか、glslファイルを保存するたびに落ちてしまいました。

→関連するissue

astroではwatch:falseを加えてますが、viteではいらないかもしれません。