rsbuild-plugin-glsl

中文 · English · Documentation

中文

为 Rsbuild 提供 GLSL、WGSL 和模块化 shader 文件导入。支持递归 #include、依赖监听、重复模块检测/去重、异步后处理和生产压缩。

安装

pnpm add -D rsbuild-plugin-glsl

import { defineConfig } from '@rsbuild/core';
import { pluginGlsl } from 'rsbuild-plugin-glsl';

export default defineConfig(({ envMode }) => ({
  plugins: [
    pluginGlsl({
      minify: envMode === 'production',
      removeDuplicatedImports: true,
    }),
  ],
}));

#include chunks/color;

void main() {
  gl_FragColor = getColor();
}

import fragmentShader from './main.frag';

TypeScript 项目在 compilerOptions.types 中加入 rsbuild-plugin-glsl/ext。

完整的中文指南、配置 API和实时示例由 Rspress 构建。

English

Import GLSL, WGSL and modular shader files in Rsbuild. Recursive includes, dependency watching, duplicate detection/removal, async post-processing and production minification are built in.

Install

npm install --save-dev rsbuild-plugin-glsl

import { defineConfig } from '@rsbuild/core';
import { pluginGlsl } from 'rsbuild-plugin-glsl';

export default defineConfig(({ envMode }) => ({
  plugins: [
    pluginGlsl({
      minify: envMode === 'production',
      removeDuplicatedImports: true,
    }),
  ],
}));

import fragmentShader from './main.frag';

Add rsbuild-plugin-glsl/ext to compilerOptions.types in TypeScript applications.

Read the full English guide, API reference and live examples.

Options

| Option | Default | Notes | | ------------------------- | ----------------------- | -------------------------------------- | | include | shader extension RegExp | Rspack RuleSetCondition | | exclude | undefined | Rspack RuleSetCondition | | defaultExtension | 'glsl' | Appended to extension-less chunks | | warnDuplicatedImports | true | One warning per importer/chunk pair | | removeDuplicatedImports | false | Inline a chunk once per entry graph | | importKeywords | ['#include'] | Custom directives are supported | | onComplete | undefined | Async final processor | | minify | false | Boolean or custom async processor | | compress | false | Deprecated alias of minify | | watch | true | Register all chunks with Rspack | | root | '/' | Project-relative base for root imports |

Compatibility and reliability

• Rsbuild 1.x and 2.x; Node.js ^20.19.0 || >=22.12.0.
• ESM and CommonJS package conditions with matching .d.ts and .d.cts declarations.
• Per-transform state: parallel entries and multi-environment builds cannot leak dependency state.
• CI covers Linux, Windows, minimum/latest Node, Rsbuild 1 compatibility, package export validation and the Rspress production build.

Inspired by vite-plugin-glsl.

License

MIT