ES6中JavaScript的开发与调试

我一直在试图找到一种编写ES6 JavaScript代码的方法，该代码具有实时调试功能

问题是ES6代码需要先传输，浏览器才能解释它（使用babel很容易），因此很难使用调试断点

我发现这两篇文章很有帮助：

我的问题：

这些天来，熟练的JavaScript开发人员对上述问题做了什么？下面三个中的任何一个

在ES6中编写，预先使用babel/webpack进行传输，然后尝试调试新的凌乱的ES5代码

使用源代码映射以某种方式将ES6原始代码与传输的ES5生成的代码同步，以使调试工作正常

根本不写ES6代码

---

在过去几年中，我所从事的大多数商业项目都已建立，因此您可以编写ES6代码，使用Webpack、Babel/Babel Loader，并启用源地图

---

然后在Chrome开发工具中轻松调试。

源代码映射似乎是调试代码的最简单方法，至少对我来说是这样

我自己也花了几个小时在同样的挑战上，在Visual Studio代码中

我不会因为解决了这个问题而受到表扬，这要归功于达斯汀·卡拉威。你可以在他的中间文章中找到简单的分步说明

总结（在Visual Studio代码中调试传输的代码）：

• Visual Studio代码（VSC）不运行任何代码。节点运行代码，VSC在顶部添加调试功能
• VSC在启动调试器时扫描源文件以查找断点
• 然后，它使用一个源映射来找出断点在运行代码中的位置，以及节点应该停止的位置
• Babel可以监视代码的更改，并根据需要实时重新编译

---

Dustin的说明允许您在VisualStudio代码中实时调试ES6文件

---

无论何时准备生产，只需重新编译并与Babel和Webpack捆绑。

源地图就是解决方案。如果添加得当，Transfilation将成为现代浏览器本机支持ES6的一个实现细节。谢谢dashton。那么您实际上是先编译/传输它，然后调试ES4代码？这不是很难吗？因为代码比你原来写的更复杂？作为补充，我一直在使用VisualStudio代码，我喜欢编辑器和IntelliSense。不过，任务和启动设置绝对可怕。我花了两天的时间试图学习，但仍然没有掌握。我发现：这或多或少就是你在做的事情？在调试过程中，每次做一点小的改动，你们不必回去重新编译和重新加载吗？你们可以运行webpack，让它监视文件系统；然后，您所做的任何代码更改都会传输到ES5。在webpack和开发工具中启用源地图后，您就可以突破点并逐步完成ES6代码。网上有很多关于设置网页包、巴别塔和源地图的技巧。这个不错,；是的，你发布的链接就是我正在做的。关键是您可以让webpack监视更改，因此它会自动重新传输更改。随着项目越来越大，您的网页设置可以得到优化，以提高手表的性能。关注细节：是什么让您得出“节点无法以本机方式运行ES6”的结论？目前还没有JavaScript引擎以本机方式支持ES6模块。甚至连Chrome和Node.js中的V8引擎都没有。导入/导出就是一个例子。你呢？很有趣。不过，我不认为完全依赖它会让我感到舒服。我会担心向后兼容性，并且必须为其编写特殊代码。至少在传输之后，我可以确定它不会给任何人带来任何问题。@Bergi如图所示：，您是对的，node.js

8.9.x

，运行JavaScript引擎

6.1.534.xx

（v8）支持几乎所有ES6。不过，该网站确实存在向后兼容性问题。我已相应地修改了我的答案。