Geek Answers Handbook

Electron and ES6, how to implement, require remote / ipc when using gulp and ES6 modules

I use ES6 js files, which are then compiled using gulp (browserify / babel), an example ES6 file:

I have a regular App.js that is used to configure the main window, etc. Then the html pages will use the main.min.js file, which basically consists of all my ES6 classes compiled into a single file:

file loader.es6

import Main from './pages/Main.es6' new Main()

File Main.es6

  import Vue from 'vue'; export default class Main extends Vue{ constructor() {...} ..... }

When compiling and starting everything works fine, and everything is fine ... But since I thought that if I want to implement the IPC, 'Remote' modules, I have problems with compilation, since they cannot find these modules, either with of the require() or import.. methods in my classes.

therefore, the following is true:

  import Remote from 'remote' import Main from './pages/Main.es6' new Main()

or

 var Remote = require('remote') import Main from './pages/Main.es6' new Main()

Is it possible to do this, or is there no need to think more and return to normal js, please.

Any ideas / tips would be greatly appreciated.

EDIT: Add Error Information

Example sample file Main.es6

see the added var var Remote = require('remote') at the top, this causes the following error.

even using import Remote from 'remote'

 { [Error: Cannot find module 'remote' from '/Volumes/DAVIES/ElectronApps/electron-vuejs-starter/resources/js/pages'] stream: { _readableState: { highWaterMark: 16, buffer: [], length: 0, pipes: [Object], pipesCount: 1, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, objectMode: true, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null, resumeScheduled: false }, readable: true, domain: null, _events: { end: [Object], error: [Object], data: [Function: ondata], _mutate: [Object] }, _maxListeners: undefined, _writableState: { highWaterMark: 16, objectMode: true, needDrain: false, ending: true, ended: true, finished: true, decodeStrings: true, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: false, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, buffer: [], pendingcb: 0, prefinished: true, errorEmitted: false }, writable: true, allowHalfOpen: true, _options: { objectMode: true }, _wrapOptions: { objectMode: true }, _streams: [ [Object] ], length: 1, label: 'deps' } }
+6
source share
3 answers

He played well, and I managed to get this to work in some way:

Basically, I install the remote modules and ipc modules on the html page and then pass them to my class for this page.

main.html

  <script> var remote = require('remote'); var ipc = require('ipc'); new Main(ipc); </script>

Main.js - Class File

  export default class Main extends Vue{ constructor(ipc) { .... ipc.send('listener here','message here'); .....

Files can be viewed in this Branch :

+4
source

In my case, I use browserify with babelify if I tried

var remote = require('remote')

I would get an error:

Error: cannot find module 'remote' from xxx

But if I tried

var remote = window.require('remote')

He works.

import remote from 'remote' does not work, it seems that the browser cannot find those native modules that are not defined in package.json .

+6
source

Honestly, the easiest way to solve this is to not minimize your binaries or use a browser. Electron already has require in the global scope - all you need to do is run your files using Babel before ES6 => ES5 compile them ( electron-compile makes this trivially easy). Your import statement will translate to require , which Electron will automatically process out of the box.

In general, many of the optimization strategies that you used on the Internet, such as minification or concatenation, are not needed or do not make sense in Electron, you can simply not do it!

+4
source

More articles:


All Articles