Home

Appearance

glsl + vue + vite + ts 应用配置 ​

glsl 有些用法不能直接在 vue3（js）使用，如：外部导入glsl文件代码，以及glsl、frag文件无法正确加载，可以只用vite-plugin-glsl插件。

注意版本及用法细节

vite-plugin-glsl ​

安装：

npm i vite-plugin-glsl --save-dev
# or
yarn add vite-plugin-glsl --dev
# or
pnpm add -D vite-plugin-glsl
# or
bun add vite-plugin-glsl --dev
npm i vite-plugin-glsl --save-dev
# or
yarn add vite-plugin-glsl --dev
# or
pnpm add -D vite-plugin-glsl
# or
bun add vite-plugin-glsl --dev

配置：

javascript
// vite.config.js
import glsl from 'vite-plugin-glsl';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [glsl()]
});
// vite.config.js
import glsl from 'vite-plugin-glsl';
import { defineConfig } from 'vite';

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

Default Options 默认选项：

javascript
// vite.config.ts 文件
import glsl from 'vite-plugin-glsl'; 

export default defineConfig({
  base: '/s-three/',
  plugins: [
    glsl({
      include: [                   // Glob pattern, or array of glob patterns to import
        '**/*.glsl', '**/*.wgsl',
        '**/*.vert', '**/*.frag',
        '**/*.vs', '**/*.fs'
      ],
      exclude: undefined,          // Glob pattern, or array of glob patterns to ignore
      warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
      defaultExtension: 'glsl',    // Shader suffix when no extension is specified
      compress: false,             // Compress output shader code
      watch: true,                 // Recompile shader on change
      root: '/'                    // Directory for root imports
    }),
  ]
})
// vite.config.ts 文件
import glsl from 'vite-plugin-glsl'; 

export default defineConfig({
  base: '/s-three/',
  plugins: [
    glsl({
      include: [                   // Glob pattern, or array of glob patterns to import
        '**/*.glsl', '**/*.wgsl',
        '**/*.vert', '**/*.frag',
        '**/*.vs', '**/*.fs'
      ],
      exclude: undefined,          // Glob pattern, or array of glob patterns to ignore
      warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
      defaultExtension: 'glsl',    // Shader suffix when no extension is specified
      compress: false,             // Compress output shader code
      watch: true,                 // Recompile shader on change
      root: '/'                    // Directory for root imports
    }),
  ]
})

TS配置：

javascript
{
  "compilerOptions": {
    "types": [
      "vite-plugin-glsl/ext"
    ]
  }
}
{
  "compilerOptions": {
    "types": [
      "vite-plugin-glsl/ext"
    ]
  }
}

或作为全局类型的 package dependency 指令：

javascript
/// <reference types="vite-plugin-glsl/ext" />
/// <reference types="vite-plugin-glsl/ext" />

拓展 ​

vite项目中 tsconfig.json 和 tsconfig.app.json 是 TypeScript 项目中的配置文件，用于指定编译器选项和项目结构。它们的区别主要在于用途和配置的具体内容。

  1. tsconfig.json:

    • 这是 TypeScript 项目的默认配置文件。
    • 通常用于定义整个项目的编译选项。
    • 包含 compilerOptions、include、exclude 等字段，用于指定编译器行为、包含的文件和排除的文件。
    • 适用于整个项目的通用配置。

  2. tsconfig.app.json:

    • 这是一个特定于应用程序的配置文件，通常用于大型项目中。
    • 可以继承自 tsconfig.json，并在此基础上进行特定于应用程序的配置。
    • 可能包含与应用程序相关的特定编译选项或路径配置。
    • 适用于需要在同一项目中区分不同模块或应用程序的情况。
    • 在大型项目中，通常会有一个通用的 tsconfig.json，然后为每个子项目或应用程序创建特定的 tsconfig.app.json，以便更好地管理和组织项目结构。