title: How to import or require a js file dynamically depending on if it's development or production env?
body: <h2>Problem</h2>
  
  <p>I know that <code>ES6 imports</code> and <code>NODE require()</code> use static analysis and do not support dynamic paths. But how do we work around it? What's the solution? </p>
  
  <p>My Electron app, during installation copies <code>shortcuts.js</code> file from development (project) folder <code>[project_dir]/public/resources</code> into the <code>[app_installation_dir]/resources</code> folder. </p>
  
  <p>So the problem is: </p>
  
  <ul>
  <li>In development the app should import <code>../public/resources/shortcuts.js</code></li>
  <li>In production the app should import <code>[app_installation_dir]/resources/shortcuts.js</code></li>
  </ul>
  
  <p>I cannot specify the "non-dynamic" path for production since I don't know in advance what <code>[app_installation_dir]</code> path is going to be.</p>
  
  <h2>Code</h2>
  
  <p>I tried the following, but expectedly only the <code>else</code> brunch works:</p>
  
  <pre class="lang-js prettyprint-override"><code>const shortcuts = process.env.NODE_ENV === 'production'
    ? require(`${process.resourcesPath}/shortcuts.js`).data
    : require(../public/resources/shortcuts.js`).data
  </code></pre>
  
  <p>After installing the app, in production, I'm getting the error:</p>
  
  <pre><code>Uncaught Error: Cannot find module [app_installation_dir]/resources/shortcuts.js
  </code></pre>
  
  <p>since, I guess, <code>require</code> doesn't see the dynamic path as something it can import (I checked, the file exists at this path).</p>
  
  <p>I then converted the file from <code>module.exports</code> to <code>export default {}</code> and tried the following ES6 method but I get the same error:</p>
  
  <pre class="lang-js prettyprint-override"><code>if (process.env.NODE_ENV === 'production') {
    const importPath = path.join(process.resourcesPath, 'shortcuts.js')
    import(importPath)
      .then((data) =&gt; {
        console.log('IMPORT DATA', data)
      })
  }
  else if (process.env.NODE_ENV === 'development') {
    import('../public/resources/shortcuts.js')
      .then((data) =&gt; {
        console.log('IMPORT DATA', data)
      })
  }
  </code></pre>
  
  <h3>babel.config.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    presets: [  
      '@vue/cli-plugin-babel/preset',
    ]
  }
  </code></pre>
  
  <h3>Project created</h3>
  
  <pre><code>vue create app-name
  &gt; selected [babel, eslint]
  
  
  vue add electron-builder
  </code></pre>