esbuild-plugin-glslify

An esbuild plugin to compile glslify shaders. Both standalone files and inline template tags are offered.

I was finding errors with other glslify plugins, but found that when using the glslify tools directly everything worked as expected. This tool is based on how things are managed in the glslify cli.

Usage

Install: npm install @rubenrodriguez/esbuild-plugin-glslify

Import and use the package that suites your project.

import { glslifyFiles, glslifyInline } from './index.mjs'
import { build } from 'esbuild'

await build({
  entryPoints: ['example/input.mjs'],
  outfile: 'example/output.js',
  target: 'es6',
  bundle: true,
  format: 'esm',
  plugins: [
    glslifyFiles(),
    glslifyInline(),
  ],
})

Example

There is an example esbuild config, which references an input javascript file which imports a .vert shader, and also has the same contents as an inline shader. The output shows that they export the same thing. I was specifically getting errors with other loaders using glsl-georender-style-texture and the way that the package imports the same package twice. Once from the root shader, and another time from within another dependency. Other glslify packages would represent the same struct with two different names, one per import. This package gives the correct result.

Exports

glslifyFiles accepts an object of options { fileTypes }, where fileTypes is an array of the relevant file extensions to glslify on import.

glslifyInline accepts an object of options, { templateTag, fileTypes }, where templateTag is a string that represents the template tag. This defaults to glsl as is common in this ecosystem. fileTypes is an array of the file types to look for this templateTag in.