title: Using Modules in the Browser (without WebPack)
body: <p>I'm grokking my way through ES6 and I ran into Modules (nice!) and in learning, I am trying to see if I can use them in the browser <strong><em>without</em></strong> WebPack (which I haven't learned yet).</p>
  
  <ol>
  <li><p><strong>So, I have the following files/folder structure in my JS directory</strong></p>
  
  <pre><code>js
  
   - lib (for complied es6 via Babel)
     - mods (compiled modules)
       - module.js (compiled via Babel)
     - app.js (imports modules, attached to index.html)
  
   - src (for "raw" es6)
     - mods (es6 modules)
       - module.js (es6 module)
     - app.js (imports modules)
  </code></pre></li>
  <li><p><strong>In js/src/mods/module.js, I have the following code....</strong></p>
  
  <pre><code>export const topTime = 1.5;
  
  export const subTime = 0.75;
  </code></pre></li>
  <li><p><strong>Which is imported by js/src/app.js ...</strong></p>
  
  <pre><code>import { topTime, subTime } from './mods/modules';
  
  console.log(topTime);
  
  console.log(subTime);
  </code></pre></li>
  <li><p><strong>I then compiled all es6 files to es5 (which placed the files in the lib dir.)</strong></p>
  
  <pre><code>npm run babel
  </code></pre></li>
  <li><p><strong>Now I <em>can</em> run the main file (js/lib/app.js) inside my editor (vscode/output tab)</strong></p>
  
  <pre><code>[Running] node "/home/me/www/es6.local/js/lib/app.js"
  
  1.5
  
  0.75
  </code></pre></li>
  </ol>
  
  <p>...but I think that is only because it's running in node. </p>
  
  <ol start="6">
  <li><p><strong>It breaks when I call my index.html file (with js/lib/app.js) in the browser (FF) as I get the following error...</strong></p>
  
  <pre><code>ReferenceError: require is not defined
  </code></pre></li>
  <li><p><strong>So I see that babel compiled this...</strong></p>
  
  <pre><code>import { topTime, subTime } from './mods/modules';
  </code></pre>
  
  <p><strong>into this...</strong></p>
  
  <pre><code>var _modules = require('./mods/modules');
  </code></pre></li>
  </ol>
  
  <p><strong>...But I thought this was valid es5? ...no? So HOW was this done BEFORE webpack? Please advise.</strong></p>
  
  <hr>
  
  <p>Here is my <code>package.json</code> (in case it helps)...</p>
  
  <pre><code>{
    "name": "es6.local",
    "version": "0.0.1",
    "description": "JavaScript ES6 Testing Sandbox",
    "main": "index.html",
    "scripts": {
      "babel": "babel js/src --out-dir js/lib --source-maps"
    },
    "author": "Student",
    "license": "ISC",
    "devDependencies": {
      "eslint": "^4.16.0",
      "eslint-plugin-import": "^2.8.0",
      "eslint-plugin-jsx-a11y": "^6.0.3",
      "eslint-plugin-react": "^7.6.0",
      "eslint-config-airbnb": "^16.1.0",
      "babel-cli": "^6.26.0",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.6.1"
    },
    "babel": {
      "presets": [
        [
          "env",
          {
            "targets": {
              "browsers": [
                "last 2 versions",
                "safari &gt;= 7"
              ]
            }
          }
        ]
      ]
    }
  }
  </code></pre>