如何在Vite中获得映射的Url？源图
如何在Vite中获得映射的Url？源图
提问于 2022-07-24 19:04:09
我还没有进入插件的世界，但我有一个想法，我想测试它尽可能简单。
问题：我有一个没有源地图的url，例如instance/$$self.$$.update@http://localhost:5173/src/lib/ContextListItem.svelte:448:15。
我想从它得到一个有源地图的网址，例如http://localhost:5173/src/lib/ContextListItem.svelte:19:11。
从理论上讲，它是一个简单的函数：
const mappedUrl = getMappedUrl(url)怎么把它放进维特里？
，我需要它做什么？
我有这样的代码：
window._log = console.log.bind(console);
console.log = function (...a) {
try {
throw Error("aa");
} catch (err) {
const fileUrl = err.stack.split("\n")[1].split("@")[1].replace(`${location.origin}/`,"").split(":")[0];
window._log(...a, `${location.origin}/__open-in-editor?file=${/* encodeURIComponent */(fileUrl)}`);
}
}我希望(如您所见)添加一个链接到代码中的位置(多亏了来自__open-in-editor的方法)。
在这里，我在文件中遗漏了一个特定的行和列。
在Microsoft中，控制台上的任何链接都可以直接指向VSCode，但不幸的是，在其他浏览器中，这是不存在的(例如，我对火狐https://bugzilla.mozilla.org/show_bug.cgi?id=1771862的错误)。
回答 1
Stack Overflow用户
发布于 2022-07-25 15:00:40
这是答案，但它只能异步工作，因此不适合替换console.log。:/
在网络上使用- https://github.com/mozilla/source-map/#use-on-the-web
使用源映射- https://github.com/mozilla/source-map/#consuming-a-source-map
<script src="https://unpkg.com/source-map@0.7.3/dist/source-map.js"></script>
<script>
sourceMap.SourceMapConsumer.initialize({
"lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
});
</script>
<script type="module">
export async function aaa (origin, fileUrl, line, column) {
const res = await fetch(`${origin}/${fileUrl}.map`);
const json = await res.json();
const place = await sourceMap.SourceMapConsumer.with(json, null, consumer => {
const place = consumer.originalPositionFor({
line: Number(line),
column: Number(column)
});
return place;
});
return place;
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73101240
复制相关文章
相似问题
腾讯云开发者
