Using Modules in the Browser (without WebPack)

Question

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 without WebPack (which I haven't learned yet).

1. So, I have the following files/folder structure in my JS directory

   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)
   

2. In js/src/mods/module.js, I have the following code....

   export const topTime = 1.5;
   
   export const subTime = 0.75;
   

3. Which is imported by js/src/app.js ...

   import { topTime, subTime } from './mods/modules';
   
   console.log(topTime);
   
   console.log(subTime);
   

4. I then compiled all es6 files to es5 (which placed the files in the lib dir.)

   npm run babel
   

5. Now I can run the main file (js/lib/app.js) inside my editor (vscode/output tab)

   [Running] node "/home/me/www/es6.local/js/lib/app.js"
   
   1.5
   
   0.75
   

...but I think that is only because it's running in node.

6. It breaks when I call my index.html file (with js/lib/app.js) in the browser (FF) as I get the following error...

   ReferenceError: require is not defined
   

7. So I see that babel compiled this...

   import { topTime, subTime } from './mods/modules';
   

   into this...

   var _modules = require('./mods/modules');
   

...But I thought this was valid es5? ...no? So HOW was this done BEFORE webpack? Please advise.

---

Here is my package.json (in case it helps)...

{
  "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 >= 7"
            ]
          }
        }
      ]
    ]
  }
}

Answer 1

It's a pain.

exports and require are part of the CommonJS spec. If I remember correctly, webpack implements it internally. You need the same functionality, because it's not part of ES5.

Try RequireJS, or something similar to load your modules.