Aurelia + JSPM + Typescript 浏览器端调试

Posted 2023-02-19

【中文标题】Aurelia + JSPM + Typescript 浏览器端调试

【英文标题】：Aurelia + JSPM + Typescript browser-side debugging

【发布时间】：2017-06-04 18:30:46

【问题描述】：

我一直在尝试针对开发/构建工作流程的 Aurelia 构建选项。我们得出的结论是，我们更喜欢开发人员在捆绑网站时对其进行测试，而不是将所有单独的文件提供给浏览器。此外，我们正在使用 TypeScript。并且我们希望拥有 source maps 提供的浏览器端调试体验。我正在使用具有许多 Aurelia 组件的大型应用程序，因此在活动开发更改/刷新或监视周期期间刷新页面的几秒钟似乎会加起来。似乎如果开发人员在捆绑包中工作，捆绑问题将立即被发现。

使用 Aurelia-cli (v23)，并使用 TypeScript 创建一个新项目，然后构建创建 RequireJS 包和源映射用于浏览器调试。也就是在运行au run之后。

使用skeleton-typescript-webpack 启动项目（两周前下载），然后运行npm start 还提供浏览器端调试webpacked bundle 的typescript。

使用使用jspm和systemjs的skeleton-typescript，运行gulp serve-bundle不提供客户端打字稿调试。但是，gulp serve 确实提供了客户端调试，但该站点未捆绑。这些 gulp 任务之间的唯一区别是网站是捆绑的，而不是非捆绑的。

因此，捆绑站点的 typescript source map 客户端调试似乎适用于 Aurelia-cli 和 webpack，但不适用于 jspm。

我们的项目是基于骨架打字稿开始的。在我们重构构建工作流程之前，我试图弄清楚如何让 jspm 支持在浏览器上进行 typescript 调试。

我在网上搜索过，但没有找到任何明确的方向，并通过反复试验的方法对配置设置进行了很多实验，但似乎无法获得捆绑的 jspm 站点以允许客户端打字稿调试体验。

这是 jspm 或 systemJS 或 Aurelia-Bundler 的限制吗？或者是否有一些配置设置，在 config.js 或 bundles.js 中，我需要添加到骨架打字稿启动项目中才能使其工作？

【参考方案1】：

也许您无法访问源地图。我不确定，我记得源映射的生成方式（内联，特定文件夹中的文件）并在服务器中添加映射路径以使其可访问。

https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-aspnetcore/src/skeleton/Startup.cs#L69-L74