title: How to bundle javascript using Parcel in Electron?
body: <p>I'm using <a href="https://github.com/parro-it/electron-parcel-example" rel="nofollow noreferrer">https://github.com/parro-it/electron-parcel-example</a> to use Parcel with Electron.</p>
  
  <p>My project is <a href="https://github.com/patrykkalinowski/dcs-frontlines-electron" rel="nofollow noreferrer">https://github.com/patrykkalinowski/dcs-frontlines-electron</a></p>
  
  <p>I have basic setup where <code>renderer.js</code> is served by Parcel correctly:</p>
  
  <p><strong>renderer.js:</strong></p>
  
  <pre><code>// This file is required by the index.html file and will
  // be executed in the renderer process for that window.
  // All of the Node.js APIs are available in this process.
  
  require('./app/map')
  </code></pre>
  
  <p><strong>app/map.js:</strong> (ommited non-relevant code)</p>
  
  <pre><code>module.exports = {
      addFeature: function(coords) {
          unitsSource.addFeature(new Feature(new Circle(coords, 1e6)))
      }
  }
  
  import { Buffer } from "buffer"; // needed after 'fs' is being transpiled
  
  const fs = require ('fs');
  
  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import Feature from 'ol/Feature.js';
  import GeoJSON from 'ol/format/GeoJSON.js';
  import Circle from 'ol/geom/Circle.js'
  import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
  import {OSM, Vector as VectorSource} from 'ol/source.js';
  import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';
  </code></pre>
  
  <p>So far so good, it works. Problem arises when trying to add another file to the mix:</p>
  
  <p><strong>app/dcs.js:</strong></p>
  
  <pre><code>const mgrs = require('mgrs')
  const map = require('./map')
  
  module.exports = {
      receiveData: function(data) {
          data = JSON.parse(data)
          keys = Object.keys(data)
  
          for (key of keys) {
              var mgrs_string = data[key].mgrs_position.UTMZone + data[key].mgrs_position.MGRSDigraph + data[key].mgrs_position.Easting + data[key].mgrs_position.Northing
  
              var coords = mgrs.toPoint(mgrs_string)
              map.addFeature(coords)
  
          }
      }
  }
  
  map.addFeature([0,0]) // testing
  </code></pre>
  
  <p><code>npm start</code> results with:</p>
  
  <pre><code>App threw an error during load
  /Users/patryk/Code/dcs-frontlines-electron/app/map.js:7
  import { Buffer } from "buffer"; // needed after 'fs' is being transpiled
         ^
  
  SyntaxError: Unexpected token {
      at Module._compile (internal/modules/cjs/loader.js:752:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
      at Module.load (internal/modules/cjs/loader.js:677:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:609:12)
      at Function.Module._load (internal/modules/cjs/loader.js:601:3)
      at Module.require (internal/modules/cjs/loader.js:715:19)
      at require (internal/modules/cjs/helpers.js:14:16)
      at Object.&lt;anonymous&gt; (/Users/patryk/Code/dcs-frontlines-electron/app/dcs.js:2:13)
      at Module._compile (internal/modules/cjs/loader.js:815:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
  </code></pre>
  
  <p>This error is caused by <code>require('./map')</code> in <code>dcs.js</code> file (2nd line)</p>
  
  <p>I think that I need to tell Parcel to include <code>dcs.js</code> file in the build, but how to do it?</p>
  
  <p>This is my Parcel code in <strong>main.js:</strong></p>
  
  <pre><code>// Parcel bundler
  function runParcel() {
    return new Promise(resolve =&gt; {
      let output = "";
      const parcelProcess = execa("parcel", ["index.html"]);
      const concat = chunk =&gt; {
        output += chunk;
        console.log(output);
        if (output.includes("Built in ")) {
          parcelProcess.stdout.removeListener("data", concat);
          console.log(output);
          resolve();
        }
      };
      parcelProcess.stdout.on("data", concat);
    });
  }
  </code></pre>