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

Question

i am using ES6 js files that are then compiled by gulp (browserify/babel), example of a ES6 file is:

I have a normal App.js that is used to set up the main window etc.. Then the html pages will use a main.min.js file that is basically made up with all my ES6 classes compiled into one file:

loader.es6 file

import Main from  './pages/Main.es6'

new Main()

Main.es6 file

 import Vue from 'vue';

export default class Main extends Vue{
   constructor() {...}
   .....
}

When compiled and run this all works fine and all is good... But as i thought if i want to implement the 'IPC', 'Remote' modules, i am having issues with compiling as they cannot find those modules, either through the require() or import.. methods within my classes.

so doing the following fails:

 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 this possible to do or achieve, or nope needs more thought and going back to normal js please.

Any ideas / advice would be great thanks

EDIT: add the error details

An example file in question 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' } }

Answer 1

In my case, I'm using browserify with babelify, if I tried:

var remote = require('remote')

I would got error:

Error: Cannot find module 'remote' from xxx

But if I tried

var remote = window.require('remote')

It works.

import remote from 'remote' doesn't work, seems like browserify can't find those native modules not defined in package.json.

Answer 2

Well been playing and I have managed to get this to work in a way:

Basically i set the remote and ipc modules within the html page, then pass in those, into my class for that 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');

   .....

The files can be viewed within this Branch: