Parcel插件失效：导入GLSL文件返回路径而非文件内容

我之前也踩过这个坑！你用的那两个插件都是针对Parcel v1开发的，要是现在你用的是Parcel v2，它们根本适配不了新的插件系统，所以才会只返回文件路径而不是着色器的文本内容。给你两个靠谱的解决办法：

方法一：用Parcel原生的?raw后缀（无需额外插件） #

Parcel v2本身就支持通过添加?raw后缀直接把文件加载为纯文本，这是最简单的方式，不用装任何插件。修改你的导入语句就行：

import vertexShader from "./vertex-shaders/basic.glsl?raw";
console.log(vertexShader);

重新运行项目后，控制台就能输出着色器的完整文本内容了。

方法二：使用适配Parcel v2的GLSL转换器插件 #

如果你不想每次导入都加后缀，可以安装专门适配Parcel v2的转换器：

1. 先卸载掉之前的旧插件：

npm uninstall parcel-plugin-glsl parcel-plugin-shader-loader

2. 安装新的转换器：

npm install parcel-transformer-glsl --save-dev

3. 在项目根目录创建或修改.parcelrc文件，添加GLSL文件的转换规则：

{
  "transformers": {
    "*.glsl": ["parcel-transformer-glsl"]
  }
}

完成这些步骤后，你就可以像之前那样直接导入GLSL文件，拿到的就是纯文本内容了：

import vertexShader from "./vertex-shaders/basic.glsl";
console.log(vertexShader);

另外建议你确认下自己的Parcel版本，终端运行parcel --version就能查看。如果还在使用Parcel v1，那可能是插件安装或配置的问题，但v1已经停止维护了，更推荐升级到v2来避免这类兼容性麻烦。

内容的提问来源于stack exchange，提问作者Peeke Kuepers