如何在 VSCode 中设置 pathMapping 来调试 Snowpack 应用程序

我正在评估Snowpack https://www.snowpack.dev/用于构建我的 JavaScript 项目。然而，VSCode 和Chrome 调试器 https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome扩展名无法将开发服务器上的脚本与本地源文件匹配。因此，断点不起作用。我没有使用任何源映射，因为我没有捆绑/转换任何东西，只是使用普通的 ES 模块。

我正在使用以下模板：https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-lit-element https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-lit-element

该项目的简化目录布局是：

public/
  index.html
src/
  index.js 

现在，当我启动 Snowpack 开发服务器时，它使用以下布局提供文件，这是完全不同的：

index.html
dist/
  index.js

我在 VSCode 中尝试了以下启动配置，但它不起作用，即它无法匹配 javascript 文件：

{
  "name": "Launch localhost",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:8080/",
  "webRoot": "${workspaceFolder}/public",
  "pathMapping": {
    "/dist": "${workspaceFolder}/src"
  }
}

The pathMappingproperty 的文档非常少，我想知道它是否有效。

有任何想法吗？

Update:

lit-element 示例似乎使用 babel 进行转译，但即使禁用转译，问题仍然存在。这更多的是 VSCode 问题，而不是 Snowpack 问题。

要创建您想要的输出，请配置 Snowpack 配置的挂载选项，尝试此配置以获得您需要的结果。

  mount: {
   public: '/',
   src: '/src',
  },