TypeScript库中如何基于脚本路径读取项目文件？

因为你的脚本是ES模块（使用了import语句），document.currentScript.src在模块环境中会返回null，这就是你出错的原因。要实现从当前脚本出发的相对路径读取文件，推荐使用ES模块标准的import.meta.url属性——它能获取到当前模块文件的绝对URL，以此为基准解析目标文件的路径，完全不受HTML页面部署位置的影响。

具体实现步骤 #

假设你的项目结构如下：

src/
├── Material.ts
└── Shader/
    └── basic.glsl

1. 获取当前模块的绝对URL #

在Material.ts中，通过import.meta.url拿到当前脚本的绝对路径：

const currentModuleUrl = new URL(import.meta.url);

2. 解析目标Shader文件的绝对路径 #

使用URL构造函数的第二个参数（基准URL），传入相对当前模块的路径，自动生成目标文件的绝对URL：

// 相对路径根据实际目录结构调整，这里是Material.ts同级的Shader目录下的basic.glsl
const shaderFileUrl = new URL('./Shader/basic.glsl', currentModuleUrl);

3. 使用fetch读取文件内容 #

现在可以直接用这个绝对URL发起fetch请求：

async function loadShaderContent(): Promise<string> {
  const response = await fetch(shaderFileUrl.href);
  
  if (!response.ok) {
    throw new Error(`加载Shader失败：HTTP ${response.status} ${response.statusText}`);
  }
  
  return await response.text();
}

// 使用示例
loadShaderContent()
  .then(content => console.log('Shader内容:', content))
  .catch(err => console.error(err));

注意事项 #

• 打包工具兼容性：主流打包工具（Vite、Webpack 5+、Rollup）都支持import.meta.url，如果使用旧版打包工具可能需要额外配置。
• 静态资源处理：如果使用打包工具，需确保Shader文件被当作静态资源保留（而非被打包进JS），也可以利用工具特性直接导入文本。比如在Vite中，可通过import shaderContent from './Shader/basic.glsl?raw'直接导入内容，无需使用fetch。
• 跨域问题：浏览器环境下需确保目标文件和当前脚本同域，或服务器配置了CORS允许跨域访问。

内容的提问来源于stack exchange，提问作者Antoine Bartoli