如何解决如何在 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',},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。