如何在 VSCode 中设置 pathMapping 以调试 Snowpack 应用程序 [英] How to setup pathMapping in VSCode to debug a Snowpack application

问题描述

我正在评估 Snowpack 以构建我的 JavaScript 项目.但是，VSCode 和 Debugger for Chrome 扩展无法匹配将开发服务器上的脚本复制到本地源文件.因此，断点不起作用.我没有使用任何源映射，因为我没有捆绑/转换任何东西，只是使用 vanilla ES 模块.

I'm evaluating Snowpack for building my JavaScript project. However, VSCode and the Debugger for Chrome extension cannot match the scripts on the dev server to the local source files. Because of this, breakpoints don't work. I'm not using any source maps because I'm not bundling/transforming anything, just using vanilla ES modules.

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

项目的一个简化目录布局是:

A simplified directory layout of the project is:

public/
  index.html
src/
  index.js 

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

Now when I start the Snowpack dev server it serves the files using the following layout, which is quite different:

index.html
dist/
  index.js

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

I tried the following launch configuration in VSCode, but it does not work, i.e., it cannot match the javascript files:

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

pathMapping 属性的文档非常少，我想知道它是否有效.

The pathMapping property has very scant documentation, and I'm wondering whether it's working at all.

有什么想法吗?

更新:

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

The lit-element example seems to use babel for transpiling, but even with transpiling disabled the problem persists. This is more a VSCode problem, not a Snowpack problem.

推荐答案

要创建您想要的输出，请为 snowpack 配置配置挂载选项，试验此配置以获得您需要的结果.

To create an output you would like to have please configure mount option for snowpack config, experiment with this config to get the result you need.

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

这篇关于如何在 VSCode 中设置 pathMapping 以调试 Snowpack 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！