2

Just so I'm clear, here's what I have, maybe someone can confirm.

1) ES6 Classes defined inside an HTML file work fine. let x = new glob(213); // works good

2) But total failure, once I move class glob code to an external JS and reference it with . The new glob(213); fails. Even if I Babel glob.js to create ES5 code.

Is this the current state of play with ES6 classes? I'm not using import but do have export. Or do I need to use a bundler, like Webpack, to smoosh everything into a single all.js to get external classes to work?

Rather disappointed if this is the current state of play, or am I being overly demanding. (We've been using external files use for decades.)

Thanks, from a frustrated JS coder.

INTERNAL version

<body style="font-family: sans-serif; line-height: 2">
<p id="showResults" style="font-size: 20pt;"></p>


<script>

class glob {
  constructor(mass) {
    this.mass = mass;
  }
  getMass() {
    return this.mass;
  }

}

let gg = new glob(213);
let gm = gg.getMass();

showAll  =  " ";
showAll += `glob mass =  ${gm}<br>`
document.getElementById("showResults").innerHTML = showAll;
</script>


</body>

EXTERNAL VERSION

'use strict';

class glob {
  constructor(mass) {
    this.mass = mass;
  }
  getMass() {
    return this.mass;
  }

}
export default glob;

Then in HTML

<body style="font-family: sans-serif; line-height: 2">
<p id="showResults" style="font-size: 20pt;"></p>

<script src="build/glob.js"></script>

<script>
alert(1);  //Shows
let gg = new glob(213);
alert(2);  // Never shows

And Babel

npm run babel -silent  -- --presets es2015 src/g*.js --out-dir build
Milton Valler
  • 53
  • 1
  • 5
  • 1
    What does the code inside `build/glob.js` look like? That'll give you a hint. – Adam Jenkins Mar 31 '17 at 23:03
  • 3
    Do you expect the module's export to be globally available somehow? Why? And how should it know that the global variable is named `glob`? You might want to read [How to use ECMAScript6 modules within webpages](http://stackoverflow.com/q/28761120/218196) – Felix Kling Mar 31 '17 at 23:04

0 Answers0