esbuild-webgl

library0.0.3jsnpmunverified

ESBuild plugin that allows importing WebGL shaders from .glsl files directly into JavaScript or TypeScript projects. Currently at version 0.0.3, this plugin compresses GLSL code to reduce bundle size and promotes separation of concerns by keeping shaders in dedicated files rather than inline strings. It integrates with esbuild and tsup workflows, provides TypeScript type definitions, and supports common build configurations. Unlike manual shader loading or inline strings, this plugin automates shader compilation during the build step.

devops web-framework

npm install esbuild-webgl

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-WEBGL

esbuild-webgl

devopsjavascriptv0.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

webglPlugin

✓ import { webglPlugin } from 'esbuild-plugin-webgl'

✗ import webglPlugin from 'esbuild-plugin-webgl'

Named export, not default. Use {} destructuring.

default

✓ import { webglPlugin } from 'esbuild-plugin-webgl'

✗ const webglPlugin = require('esbuild-plugin-webgl')

ESM-only package; CommonJS require() will not work. Use import syntax.

type import

✓ import type { WebglPluginOptions } from 'esbuild-plugin-webgl'

✗ import { WebglPluginOptions } from 'esbuild-plugin-webgl'

If types are needed at runtime, use value import; otherwise prefer type import to avoid runtime overhead.

Demonstrates plugin setup with esbuild and importing .glsl files as strings.

import { webglPlugin } from 'esbuild-plugin-webgl'; import esbuild from 'esbuild'; await esbuild.build({ entryPoints: ['src/index.ts'], bundle: true, outfile: 'dist/bundle.js', plugins: [webglPlugin()], }); // In your source file: import vertexShader from './shaders/vertex.glsl'; import fragmentShader from './shaders/fragment.glsl'; const gl = canvas.getContext('webgl'); const vs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vs, vertexShader); gl.compileShader(vs); const fs = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fs, fragmentShader); gl.compileShader(fs);

Debug

Known issues

gotchaGLSL files must use .glsl extension; other extensions like .vert/.frag are not supported.

fix

Rename shader files to .glsl extension.

affects: >=0.0.0

gotchaPlugin only works with esbuild; not compatible with webpack, Rollup, or other bundlers without additional configuration.

fix

Switch to esbuild for builds, or use a different shader loading approach for other bundlers.

affects: >=0.0.0

gotchaPlugin compresses shader code automatically; debugging with prettified shaders may be harder due to minification.

fix

Use a separate unminified build for development, or disable compression if plugin options allow (not currently exposed).

affects: >=0.0.0

Errors

Common errors & fixes

Error: The module 'esbuild-plugin-webgl' does not provide a default export

Using default import instead of named import

fix

Change to: import { webglPlugin } from 'esbuild-plugin-webgl'

Cannot find module 'esbuild-plugin-webgl'

Package not installed or used without proper bundler setup

fix

Run: npm install esbuild-plugin-webgl --save-dev

TypeError: webglPlugin is not a function

Using wrong import (e.g., const webglPlugin = require('esbuild-plugin-webgl')) with CommonJS

fix

Switch to ESM import: import { webglPlugin } from 'esbuild-plugin-webgl'

Upgrade

Version history

0.0.3latest on npm

Audit

Dependencies

esbuildoptionalPeer dependency required for plugin to function

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react18-tools/esbuild-plugin-webgl ↗

packagehttps://www.npmjs.com/package/esbuild-webgl ↗