ES6中的JavaScript开发与调试

Question

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

问题是ES6代码需要在浏览器解释之前进行转换（使用babel很容易），因此很难使用调试断点。

我发现这两篇文章很有用：

1. how-to-debug-es6-nodejs-with-vscode
2. debug-es6-code-in-node-js

我的问题：

目前，熟练的JavaScript开发人员对上述问题做了哪些工作？下面三个中的任何一个？

1. 在ES6中编写，先用babel / webpack进行编译，然后尝试调试新的凌乱的ES5代码
2. 以某种方式将ES6原始代码与已转换的ES5生成代码同步，使用源映射，以使调试工作
3. 根本没有编写ES6代码

Answer 1

我在过去几年中所做的大多数商业项目都已经设置好了你编写ES6代码，使用Webpack，Babel / Babel-Loader，并启用了源映射。

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

Answer 2

我在Visual Studio Code中花了几个小时来完成相同的挑战。

我没有因为解决它而获得赞誉，对Dustin Callaway表示赞赏。您可以在他的中篇文章here中找到简单的分步说明。

总结（在Visual Studio代码中调试转换后的代码）：

• Visual Studio Code（VSC）不运行任何代码。 Node运行代码，VSC在顶部添加调试功能
• VSC在启动调试器时扫描源文件中的断点
• 然后使用源映射找出断点所属的运行代码中的位置，从而确定Node应该停止的位置
• Babel可以观察您的代码以进行更改，并在必要时实时重新编译

Dustin的说明允许您在Visual Studio Code中实时调试ES6文件。

每当您准备好进行生产时，只需重新编译并捆绑Babel和Webpack。

Answer 3

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