目录

• • IDE 支持
  • Rollup 打包支持
  • Vue 开发支持

我维护的空间分析包，随着功能的不断增加，累计了许多的着色器代码，分散在不同的子包，而且还是保存在JS/TS文件里以字符串的形式。虽然可以通过ES6的语法导入，但是在编写的时候，由于IDE将其识别成字符串而不是代码的缘故，无法使用到智能提示，例如语法高亮，格式化等。有时功能逻辑稍一复杂，代码量一上来，再一个个调整格式的话就很烦人。

为解决上述提到的问题，需要将glsl代码写到独立的.glsl文件中，结合VSCode插件实现IDE编程支持，另外由于.glsl不是JS/TS模块，如果使用Rollup打包的话，还需安装一个插件。

IDE 支持

安装 Shader languages support for VS Code，这是一个VSCode插件，提供一系列着色器语言支持。

Rollup 打包支持

Rollup对glsl的支持，目前有社区提供的插件rollup-plugin-glsl 来实现。

首先安装，

pnpm i rollup-plugin-glsl -D -w

在Rollup配置文件里使用插件

import glsl from 'rollup-plugin-glsl';

export default {
    ...,
  plugins: [
    glsl({
      include: 'packages/**/*.glsl',
      exclude: ['packages/**/*.html', 'packages/**/*.js', 'packages/**/*.ts'],
      sourceMap: false,
    })
  ]
};

对了，如果使用TS来开发的话，打包时会出现如下错误:

error TS2307: Cannot find module './flowWallMaterial.glsl' or its corresponding type declarations.

因为TS 默认只能识别 .ts、.tsx、.js和 .jsx文件，对于 .glsl这样的着色器文件需要额外配置，在根目录下新建一个名为glsl.d.ts的声明文件，内容如下。

declare module '*.glsl' {
  const content: string;
  export default content;
}

最后在TS配置文件里添加该声明。

{
    "compilerOptions": {...},
    "include": [
        ...,
        "glsl.d.ts"
    ]
}

Vue 开发支持

空间分析包的示例是一个Vue项目，使用Vite打包，由于我在示例里导入分析包时采取引用源码的策略，所以通过ES6导入的glsl文件Vite无法识别，解决方式很简单，再额外添加一个插件—vite-plugin-glsl。

pnpm i vite-plugin-glsl --ignore-workspace

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import glsl from 'vite-plugin-glsl';

export default defineConfig({
  ...,
  plugins: [
    vue(),
    glsl(),
  ],
});