esbuild-plugin-glslify

Import GLSL strings with glslify - based on https://github.com/glslify/rollup-plugin-glslify

Usage no npm install needed!

<script type="module">
  import esbuildPluginGlslify from 'https://cdn.skypack.dev/esbuild-plugin-glslify';
</script>

README

esbuild-plugin-glslify

NOTE: this plugin is based on rollup-plugin-glslify

An esbuild plugin to import GLSL strings with glslify (a node.js-style module system for GLSL).

import frag from './shaders/frag.glsl';
console.log(frag);

Installation

yarn:

yarn add esbuild-plugin-glslify --dev

NPM:

npm install --save-dev esbuild-plugin-glslify

Usage

import { build } from 'esbuild';
import { glslify } from 'esbuild-plugin-glslify';

build({
    entryPoints: ['input.js'],
    outfile: 'output.js',
    bundle: true,
    plugins: [glslify({
        extensions: [ 'vs', 'fs', '.glsl', '.frag.shader' ],
        compress: true,
    })],
}).catch(e => {
    console.error(e);
    process.exit(1);
});

Configuration

The plugin responds to the following configuration options:

glslify({
    extensions: string[],   // a list of the file extensions this plugin should process.
                            // DEFAULT: [ 'vs', 'fs', 'vert', 'frag', 'glsl' ]
    
    compress: boolean,      // should the finial output be compressed (minified)
                            // DEFAULT: false 
});

Any unrecognized options will be forwarded to the glslify compiler:

glslify({
    transform: ['glslify-import'],  // this will configure glslify to import the `glslify-import` module
});

Read the glslify API options for more information.

See also