Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6 syntax import Electron (require..)

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?

like image 755
c1c1c1 Avatar asked Feb 13 '16 00:02

c1c1c1


People also ask

Can I use import instead of require?

One of the major differences between require() and import() is that require() can be called from anywhere inside the program whereas import() cannot be called conditionally, it always runs at the beginning of the file. To use the require() statement, a module must be saved with .

What is difference between import and require?

Key Differences Between Require and Import Require is Nonlexical and Import is Lexical. Requires to stay where they have put the file, and imports get sorted to the top of the file. Import is always run at the very beginning of the file and can't be run conditionally.


2 Answers

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

like image 135
Thomas Di G Avatar answered Sep 28 '22 08:09

Thomas Di G


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.

  1. 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; 
like image 43
Felix Kling Avatar answered Sep 28 '22 10:09

Felix Kling