本篇的内容,苏南大叔继续讲述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)

本文的测试环境:win10babel-cli6.26.0babel-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-climain.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-clibabel-register相比较而已,babel-register简单好用,无脑操作,但是治标不治本。babel-cli用起来有些绕,配置稍稍麻烦些,但是治标也治本。具体的实操过程中,大家选择哪一个,或者用其他的调试方式的话,都是可以的。

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

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

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

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

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

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