Registry / web-framework / babel-plugin-glslify

babel-plugin-glslify

library2.0.0jsnpmunverified

A Babel transform plugin that integrates glslify, allowing developers to import and inline GLSL shaders directly in JavaScript code using template literals. Version 2.0.0 is the latest stable release, targeting Node >=0.12. It enables ES6 syntax with glslify, supports tagged template strings for shader code, and works alongside other Babel transforms. Unlike the original browserify transform, this plugin is compatible with Babel-based build pipelines, making it a key tool for WebGL projects using modern JavaScript tooling. The package has no recent updates and relies on external glslify installation.

web-framework data serialization

npm install babel-plugin-glslify

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-GLSLI

babel-plugin-glslify

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

default import of glslify tagged template function

✓ import glsl from 'glslify'

✗ const glsl = require('glslify')

Using ES module import is required for the tagged template literal syntax to work correctly with babel-plugin-glslify. CommonJS require may not preserve the template literal behavior.

Plugin configuration in babel config

✓ plugins: ['glslify']

✗ plugins: ['babel-plugin-glslify']

Babel automatically resolves the 'babel-plugin-' prefix, so 'glslify' is sufficient. Using the full name may still work but is not the conventional short form.

Use with babelify transform in package.json

✓ "transform": [["babelify", { "plugins": ["glslify"] }]]

✗ "transform": ["babelify", { "plugins": ["glslify"] }]

When specifying babelify with options in package.json transforms, it must be wrapped in an array inside the outer array. Missing the double array is a common mistake.

Basic setup showing import of glslify, configuration of the Babel plugin, and usage of a tagged template literal to process GLSL shader code.

// Install dependencies // npm i -S glslify babel-plugin-glslify // Add to .babelrc or babel config // { // "plugins": ["glslify"] // } // In your JavaScript file import glsl from 'glslify'; const vertexShader = glsl` #pragma glslify: noise = require(glsl-noise/simplex/2d) void main() { float brightness = noise(gl_FragCoord.xy); gl_FragColor = vec4(vec3(brightness), 1.0); } `; // Use the shader string in your WebGL program

Debug

Known issues

gotchaglsl package must be installed separately as it is not bundled. Forgetting to install it will cause a 'Cannot find module' error.

fix

npm install --save glslify

affects: >=1.0.0

gotchaCommonJS require('glslify') does not work for template literal syntax; must use ES import.

fix

Use import glsl from 'glslify' instead of require.

affects: >=2.0.0

gotchaThe plugin is designed for Babel 6 and may not be compatible with Babel 7+ without additional configuration due to plugin system changes.

fix

If using Babel 7, try using 'babel-plugin-glslify' with the 'legacy' decorator or upgrade to a newer plugin if available.

affects: >=2.0.0

deprecatedPackage has not been updated since 2016 and may not support modern glslify features or Node versions.

fix

Consider using alternative bundler transforms like webpack-glslify-loader or rollup-plugin-glslify if encountering issues.

affects: >=2.0.0

gotchaThe plugin only processes .js files that use the glsl tagged template; it does not handle standalone .glsl files.

fix

Use glslify directly or a loader for standalone shader files if needed.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'glslify'

glslify is not installed as a dependency.

fix

Run: npm install --save glslify

SyntaxError: Unexpected identifier (while using require('glslify'))

Using CommonJS require for the glslify module instead of ES import; template literals require a function call that is only handled correctly by the Babel transform with import statements.

fix

Replace const glsl = require('glslify') with import glsl from 'glslify'

babel-plugin-glslify: Could not find plugin 'glslify'. Ensure it is installed.

The plugin name is misspelled or not installed.

fix

Ensure babel-plugin-glslify is installed: npm install --save-dev babel-plugin-glslify, and add it to babel plugins as 'glslify' (not 'babel-plugin-glslify').

TypeError: glsl is not a function

glslify is imported incorrectly, possibly using default export from a CommonJS module.

fix

Use import glsl from 'glslify' and ensure your build tool supports ES module interop.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

glslifyrequiredPeer dependency required for processing GLSL shaders; plugin acts as Babel transform wrapper around glslify.

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mikolalysenko/glslify-babel ↗

packagehttps://www.npmjs.com/package/babel-plugin-glslify ↗