javascript - 从 Assets 文件夹 : getElementbyID vs fetch, 远程文件加载非 JS 脚本或将其内容写入 html 的最佳方法？

Question

上下文:

我对 Javascript 的这一部分相当陌生(我主要来自 C++ 背景)，并且我正在尝试在我的 Jekyll 生成的网站中实现 webGL。

我正在关注以下精彩教程:https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html但我遇到了一些问题。在本教程中，他们基本上将所有内容直接输入到 html 中，这对于大型项目来说并不是理想的解决方案，因此我将它们放在 jekyll 构建中的 _assets 文件夹中的单独 .glsl 文件中。

无论如何，现在是重要的一点:

我需要将文件的内容加载到 JavaScript 中的变量中。

我首先尝试在我的 html 上执行此操作:

<canvas id="myCanvas"></canvas>
<script type="notjs" src="/assets/2dVertexShader.glsl"   id="2dVertexShader"  ></script>
<script type="notjs" src="/assets/2dFragmentShader.glsl" id="2dFragmentShader"></script>
<script type="text/javascript" src="/assets/test.js" ></script>

与该 javascript 匹配:

var vertexShaderSource = document.getElementById("2dVertexShader").text;
var fragmentShaderSource = document.getElementById("2dFragmentShader").text;

现在这不起作用了。我不知道为什么。我也尝试过使用 fetch('/assets/2dVertexShader.glsl')但这是另一个蠕虫，因为我只得到一个 promise ，并且据我所知，迫使我将大部分相关代码封装到异步函数中，以便我可以使用等待。不太理想。

我可以告诉你，实际上是在 <script> 中输入 glsl 脚本的内容。 html 中的标签可以工作，但这并不理想。完全没有。

我可以粘贴其余的 html、js 和 glsl 内容，但我非常怀疑它是否相关。

Answer 1

您的问题可能会因为主要意见而被关闭，但是......

我的建议是，使用带有多行模板的 es6 模块。

// some-vs-shader.glsl
export default `
attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = matrix * position;
}
`;

然后你可以像这样导入其他脚本

import someVertexShaderSource from './some-vs-shader.glsl';

如果您愿意，您可以稍后运行 rollup 或 webpack 或 Parcel 来读取您的代码并生成一个下载速度更快的大文件。

This is what three.js does .

请注意，为了使用 import 关键字，您需要使用 type="module" ，如任一

<script type="module" src="somescript.js"><script>

或内联

<script type="module">
import someVertexShaderSource from './some-vs-shader.glsl';
...
</script>

注:我拼凑了a working example 。我必须命名这些文件，使其以 .js 结尾，因为否则 glitch.com 的服务器会发送错误的 Content-Type header 。因此，您必须决定是否希望文件以 .glsl 结尾，您需要了解如何配置服务器以发送正确的内容类型 header 。

至于你的问题为什么

<script type="notjs" src="/assets/2dVertexShader.glsl"   id="2dVertexShader"  ></script>

不起作用，TL;DR 这是因为规范说它不应该这样做。