Javascript 从资产文件夹加载非JS脚本的最佳方法：getElementbyID vs fetch、远程文件或将其内容写入html？

上下文：

我对JavaScript这一部分（我主要是C++背景）很陌生，我正试图在我的Jykyl生成的网站中实现WebGL。 我正在遵循：的伟大教程，但我遇到了一个小问题。在本教程中，他们基本上将所有内容直接输入html，这对于大型项目来说不是一个理想的解决方案，因此我将它们放在我的jekyll build中的_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>

现在这不起作用了。我不知道为什么。我也尝试过使用

fetch（'/assets/2dVertexShader.glsl'）

，但这是另一个蠕虫，因为我只得到了一个承诺，据我所知，这迫使我将大部分相关代码封装到异步函数中，以便使用wait。不太理想

我可以告诉您，在html中的

标记中实际键入glsl脚本的内容是可行的，但这并不理想。一点也不

---

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

你的问题可能会像大多数人的意见一样结束，但是

我的建议是，使用带有多行模板的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来阅读代码并生成一个下载速度更快的大文件

请注意，要使用

import

关键字，您需要使用

type=“module”

中的

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

不起作用，TL；博士，因为说明书上说不应该这样

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

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

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