Vite项目用glsl-transpiler遇esbuild报错及require未定义问题求助

步骤1：安装CommonJS转换插件 #

glsl-transpiler是基于CommonJS编写的旧包，浏览器环境不支持require语法，需要用@rollup/plugin-commonjs转换它的模块语法。执行安装命令：

npm install @rollup/plugin-commonjs --save-dev

步骤2：配置Vite处理目标包 #

修改vite.config.js，同时解决预构建报错和require未定义的问题：

import { defineConfig } from 'vite'
import commonjs from '@rollup/plugin-commonjs'

export default defineConfig({
  optimizeDeps: {
    // 排除glsl-transpiler及其依赖的预构建，避免escaper入口解析错误
    exclude: ['glsl-transpiler', 'escaper']
  },
  plugins: [
    // 针对目标包启用CommonJS转换
    {
      ...commonjs({
        include: /node_modules\/(glsl-transpiler|escaper)/
      }),
      enforce: 'post' // 确保转换逻辑在Vite默认插件之后执行
    }
  ]
})

步骤3：代码中正常引入使用 #

直接用ES模块语法引入即可，插件会自动处理内部的require调用：

import transpile from 'glsl-transpiler'

// 示例用法
const transpiler = transpile({
  // 自定义配置选项
})
const convertedCode = transpiler(`
  // 你的GLSL代码片段
`)

备选方案：使用简化插件 #

如果上述配置不生效，可以尝试vite-plugin-commonjs-externals：

1. 安装插件：

npm install vite-plugin-commonjs-externals --save-dev

2. 修改Vite配置：

import { defineConfig } from 'vite'
import commonjsExternals from 'vite-plugin-commonjs-externals'

export default defineConfig({
  plugins: [
    commonjsExternals({
      externals: ['glsl-transpiler', 'escaper']
    })
  ]
})

问题根源说明 #

• escaper包的package.json未正确配置main/module字段，导致Vite预构建工具esbuild无法识别入口，因此需要排除预构建。
• glsl-transpiler依赖Node.js的require语法，浏览器原生不支持，必须通过插件将CommonJS语法转换为浏览器兼容的ES模块语法。

内容的提问来源于stack exchange，提问作者Simon Warchol