How can I require different modules in Javascript based on my YML build file?

Question

I'm currently working on a web game that will also be available as a desktop application via electron. I'd like to simply not require('electron') if I am building the web version of the game.

My .yml file that I use with build is as follows:

cmd: browserify {PROJECT_PATH}/js/main.js > {PROJECT_PATH}/js/bundle.js && {PROJECT_PATH}/index.html
name: 'web'
targets:
  electron:
    cmd: browserify {PROJECT_PATH}/js/main.js > {PROJECT_PATH}/js/bundle.js && electron {PROJECT_PATH}

If my build command was something like node main.js true, I could just reference the boolean argument and then use it in the Javascript to either require('electron') or not. However, I'm not sure how this can be done given my current situation.

In other words, I'd like to pass a boolean argument via my .yml build file, and use said boolean somewhat like this:

if (passedBoolean) {
  const {app, BrowserWindow} = require('electron');
}

How would I do this? If it's not possible, what would be another solution?

Answer 1

There are several ways that you could approach solving this problem. The first is to query the platform about its capabilities. For example, Electron sets the variable:

process.versions.electron

This won't be set if you're running in the browser, so you can check for its existence (and you'll know you're running in Electron). Here's the documentation: Electron: Process.

Testing for a nested property can be a bit gross, so a slightly simpler way is to wrap your attempt to access the value in a try/catch:

try {
    process.versions.electron; 
} catch (err) {
    console.log('Not electron', err);
}

You could even wrap it into a nice function:

function isPlatformElectron() {
    'use strict';
    try {
        process.versions.electron;
        return true;
    } catch (err) {
        return false;
    }
}

if (isPlatformElectron()) {
    // Do Electron-specific stuff here
}

You could alternatively do something like this with your original code (slightly modified):

let app, BrowserWindow;
try {
    ({app, BrowserWindow} = require('electron'));
} catch (err) {
    console.log('Not electron');
}

if (app && BrowserWindow) {
   console.log('is electron');
}

I find this version harder to read and prefer the function approach I suggested above, but I thought it might be useful to show the example using destructuring like your original (although you can't use const in this case).