Serving Electron renderer process over HTTP and using require

Question

I'm trying to make a mobile version of my Electron app by serving the HTML and renderer javascript files over a HTTP server started from the main process.

My renderer process javascript makes heavy use of require's. They work fine inside Electron. Outside of Electron, they don't because window.require is not defined.

So I tried to rewrite a bit of code, so that it works with modules being either required or previously loaded in a <script> tag.

Here's what I tried so far:

// Initial situation:
const $ = require('jQuery');
// on mobile : require is not defined

// Try 1
if (window.require) {
  const $ = require('jQuery');
}
// doesn't work: $ is only defined in the scope of the if

// Try 2
let $;
if (window.require) {
  $ = require('jQuery');
}
// on mobile : $ was defined from jQuery being loaded from a script tag,
// but I just overwrote it with undefined

// Try 3
let $;
if (window.require) {
  $ = require('jQuery');
}
else {
  $ = window.$;
}
// on mobile : window.$ is undefined

Can anybody see what I'm missing? Or maybe just tell me how to set up require on a non-Electron page?

foucdeg foucdeg · Accepted Answer · 2017-02-19T15:02:02

I ended up doing the following:

if (window.require) {
  window.$ = require('jQuery');
}

and then using window.$ instead of $ throughout the renderer process.

Serving Electron renderer process over HTTP and using require

1 Answers