electron中使用es6语法版的程序不在少数,使用vscode调试又是大多数人的选择。那么,大多数新人面临的错误提示就是Unexpected token import。如何解决这个问题呢?

目前来说,答案只有一个:babel。但是估计在未来的发展过程中,就不会有类似的提示了。毕竟,时代在进步嘛,babel的时代肯定是会过去的。但是,目前来说,就不得不面对利用babel转换语法的问题。

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - electron-babel
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-1)

本文的测试环境:win10babel系统包的版本号是:

  • babel-core@6.26.3
  • babel-loader@6.4.1
  • babel-preset-es2015@6.24.1
  • babel-register@6.26.0

适用问题截图

本文主要侧重于渲染进程里面的es6语法,进行讲述的,并没有涉及主进程中的es6相关处理事宜。适用的情况为Unexpected token import。截图如下图所示:

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - unexpected token
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-2)

npm包安装

需要安装几个babel包,如下:

npm i -D babel-core
npm i -D babel-loader
npm i -D babel-preset-es2015
npm i -D babel-preset-stage-0

可选包是babel-register

npm i -D babel-register

进阶的包是:

npm i -D babel-preset-stage-1
npm i -D babel-preset-stage-2
npm i -D babel-preset-stage-3

npm包中,经常出现的es2015实际上就是es6,名字虽然不一样,但是都是同一个事物。

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - es6-babel-package
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-3)

babel文件配置

babel的文件配置方式,有两种:一种是.babelrc,另外一种是package.json。当然两种同时定义了的话,.babelrc的优先级更高点。苏南大叔,选择传统的.babelrc方案。

.babelrc:

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

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - babelrc
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-4)

如果放在在package.json里面的话,会是下面的这样:

{
   "name":"demo",
   //...
   "babel": {
     "presets": [
        "es2015","stage-0"
      ],
      "sourceMaps": true,
      "retainLines": true
   }
   //...
}
  • 当然,presets里面还有很多可选项,比如:stage-0/stage-1等,变形太多,大家根据实际情况添加即可。注意相关的包要npm i -D一下。
  • 注意,如果要正常调试的话,一定要设置sourceMapstrue

设置.vscode/launch.json

这个文件实际上定义的是两个调试过程,一个是主进程,一个是渲染进程。那么,需要注意的配置点就是:需要在launch.json的渲染进程的配置中配置:"sourceMaps": true。

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - launch-sourcemap
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-5)

实时调用babel方案一

上边所说的几项内容,都是进行配置项目而已。而babel的执行,是多种多样的了。就electron-quick-start-es6这个项目而言,是利用webpack-dev-server,根据webpack.config.js的配置,调用的babel
执行的命令是:

webpack-dev-server --no-info --quiet --port 4000 --config webpack.config.js

webpack.config.js的内容是:

const webpack = require('webpack')

module.exports = {
  entry: './renderer.js',
  output: {
    path: './dist',
    publicPath: '/dev-dist',
    filename: 'renderer.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'eval-source-map'
}

从这个配置中,可以看出。所有的js文件,都会被自动babel

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - webpack-config
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-6)

实时调用babel方案二

本项目中的babel方案,是苏南大叔选择的。比较简单一些,使用的是:babel-register。这个babel-register的使用上,比较适合小白。只需要在每个需要转换es6js引用之前,加上这个babel-register即可。

需要注意的是:

  • babel-register如果放在相关的js文件内部的话,那么每个html为一个单位。每个html只要使用了es6js文件。那么就需要这个babel-register
  • babel-register如果放在electron命令行层面上的话,则只需要非常微型的修改即可。具体可以参见后续文字。

下面的是一个范例:
index.html

  <script>
  require("babel-register");
  require("./renderer.js");
  </script>

renderer.js:

import { sayHello } from './helper.js';
sayHello('world')

helper.js:

export function sayHello(target) {
  console.log(`hello ${target}!`)
}

一定要注意,每个html都需要babel-register,并不是一次性加载的。但是,这个babel-register。并不推荐在生产模式下使用的,只是适用于调试模式,因为这个是实时编译的。每次使用都编译,效率上并不是太好。

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - babel-register
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-7)

相关文章

下面是苏南大叔提供的两篇相关文章:

苏南大叔: es6 版 electron 程序 vscode 调试,babel 转换方案 - debug-final-works
es6 版 electron 程序 vscode 调试,babel 转换方案(图8-8)

总结

当然babel的转换方案并不止这两个,大家都知道现在的js世界翻天覆地的太过于厉害。所以,相关的方案就还是有很多很多了。本篇文章仅仅是抛砖引玉,以后碰到好的方案。苏南大叔会再补充,敬请期待。

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

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

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

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

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