ES6 syntax import Electron (require..)

Question

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?

Solution 1

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

Solution 2

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

Mixing different module systems can indeed be confusing.

1. It doesn't work

const electron = require('electron');
const remote = electron.remote;

is exactly the same as what you have

var remote = require('electron').remote

If yours work, the other will as well. However, I would simply stick with yours.

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

Who cares? Node doesn't support ES6 imports and exports natively and it's not super clear how CommonJS modules should map to ES6 modules. I recommend to stick with require if you are only writing for Node anyway.

---

You could try to do

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

Solution 3

These days every version of Electron comes with basic typescript support. So if you use a TS or TSX file in your project -then you can use ES Import statements inside that file. Whether you use an ES module or not.

https://www.electronjs.org/blog/typescript