ES6 syntax import Electron (require..)

c1c1c1 picture c1c1c1 · Feb 13, 2016 · Viewed 38.4k times · Source

To learn the new ES6 syntax, I've been trying to refactor some JS code.

I'm absolutely confused though by the whole import / export methods.

How do I change this require statement into ES6?

var remote = require('electron').remote

I've seen this answer but:

  1. It doesn't work
  2. It doesn't really seems to be much ES6-sque

Any thoughts?

Answer

Thomas Di G picture Thomas Di G · Sep 9, 2016

It seems imports are not implemented in either Node 6 or Chrome 51 so Electron also does not support them, according to this post: https://discuss.atom.io/t/does-electron-support-es6/19366/18

And also the last electron doc doesn't use imports, they use destructuring syntax:

const { BrowserWindow } = require('electron').remote
// or
const { remote } = require('electron')
const { BrowserWindow } = remote

http://electron.atom.io/docs/api/remote/

But you can use babel with the require hook: http://babeljs.io/docs/usage/require/

To be auto compile each required modules so you will be able to use imports. Of course the script given to electron (the one that require babel) is not compiled so you need to make a bootstrap:

// bootwithbabel.js
require("babel-register");
require( process.argv.splice(2) );

In shell (sh):

electron bootwithbabel.js app.es
alias electrones="electron bootwithbabel.js "
electrones coron.es // ^^

Then in your app you can then write:

import electron from 'electron';
import { remote } from 'electron';

You can also import only the remote module:

import { remote } from 'electron';

But you can only import both in one statement:

import electron, { remote } from 'electron'

electron.ipcRenderer.on();
let win = new remote.BrowserWindow({width: 800, height: 600});
remote.getGlobal(name)

playground