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

问题描述

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

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

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

function Filter(props) {
    const handleChange = (event) => {
        // console.log(event.target.value);
        return props.handleSort(event.target.value);
    }

const handleTagChange = (event) => {
    // console.log(event.target.value);
    return props.handleTag(event.target.value);
}
let tagNames = ["T-shirt","shirt","Denim","jacket"];
return (
    <div className="container-fluid">
        <div className="row">
            <div className="col-12 col-md-9">
                <p className = " mr-2">Filters:<span className="mr-4"></span>
                    {tagNames.map((item,idx) => (
                        <span key = {idx} >
                            <button 
                                type="button" 
                                class="btn btn-outline-secondary mr-2 custom-filter"
                                value= {item}
                                onClick = {handleTagChange}
                            >{item}</button>
                        </span>
                    ))}
                </p>
                </div>
            <div className="col-12 col-md-3">
            <select className="form-control" value = {props.sort} onChange = {handleChange}>
                {/* {console.log("CHECKING: "+props.sort)} */}
                <option value="">Sort by</option>
                <option value="lowest">lowest to highest</option>
                <option value="highest">highest to lowest</option>
            </select>
            </div>
        </div>
    </div>
)

}

    export default Filter

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

public/
  index.html
src/
  index.js 

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

index.html
dist/
  index.js

{ "name": "Launch localhost","type": "chrome","request": "launch","url": "http://localhost:8080/","webRoot": "${workspaceFolder}/public","pathMapping": { "/dist": "${workspaceFolder}/src" } } 属性的文档非常少，我想知道它是否有效。

有什么想法吗？

更新：

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

解决方法

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

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