本篇的内容，苏南大叔继续讲述vscode调试electron的事情。在上一篇文章中，有关babel-register这个非常好用的babel转化插件，大家还记得非常清楚。但是，在文末，苏南大叔也表示了：目前来说，babel-register就是个治标不治本的方案。所以，在本文中，苏南大叔推出一个指标还治本的方案，那就是babel-cli。

苏南大叔： es6 版 electron 程序 vscode 调试，babel-cli如何使用 - babel-cli-electron-es6
es6 版 electron 程序 vscode 调试，babel-cli如何使用（图8-1）

本文的测试环境：win10，babel-cli6.26.0，babel-core6.26.3。特约嘉宾仍然是改造版的electron-quick-start-es6。

electron-quick-start-es6

本文为了更加简易的说明问题，就只预设es6仅仅存在于main.src.js中一处。下面说明es6的部分：
main.src.js:

//...
import { app, BrowserWindow } from 'electron'
//...

注意：本文的入口文件的名称，写的是：main.src.js，而不是main.js。这个是因为：苏南大叔要使用babel-cli把main.src.js编译成main.js。

苏南大叔： es6 版 electron 程序 vscode 调试，babel-cli如何使用 - main-src-js
es6 版 electron 程序 vscode 调试，babel-cli如何使用（图8-2）

.babelrc：

{
    "presets": [
      "es2015","stage-0"
    ],
    "sourceMaps": true,
    "retainLines": true
}

这个文件是所有的转化的核心所在，已经多次说明过了，就不再复述了。注意："sourceMaps": true。

总结

babel-cli和babel-register相比较而已，babel-register简单好用，无脑操作，但是治标不治本。babel-cli用起来有些绕，配置稍稍麻烦些，但是治标也治本。具体的实操过程中，大家选择哪一个，或者用其他的调试方式的话，都是可以的。

更多electron的相关经验文字，请点击下面的链接查看。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可，规模化镜像抄袭本站内容的行为，将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章，如被用于商业用途，请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件，请点此获取

 【绝密】秘籍文章入口，仅传授于有缘之人   babel    electron

本站的忠实读者小伙伴，正在阅读下面这些文章：