获取文件和函数调用行(webpack插件?)

时间:2018-06-03 13:48:16

标签: javascript webpack source-maps

我使用模板文字标签从我的代码生成着色器块并最终将它们组合成一个大的着色器(目前标签只能修复缩进)。

然而,找到错误可能会成为问题,因为着色器编译器会在最终代码中给出行号。理想情况下,我想在生成的代码中插入一些源图样式的注释,这似乎非常适合我的模板标记。我可以使用new Error().stack来获取堆栈跟踪..但是,我得到的只是bundle.js中的一行,这使得它毫无用处。有没有办法获取函数调用的原始文件/行号,可能是通过一些webpack插件?

我想做的事情:

const structDecl = glsl`{
  vec4 transform;
  vec4 direction;
  vec3 color;
}`;

function glsl(...args) {
  const line = new Error().stack.split("\n")[2];
  const m = line.match(/([^\s(]+):(\d+):(\d+)/);
  return `//@m[0]\n${dedent(...args)}`;
}

结果:

//@http://localhost:3000/static/js/bundle.js:81441:7

有一个package可以将堆栈跟踪映射到原始来源,但它是异步的,所以我无法使用它。

0 个答案:

没有答案