ES6 classes and scope

Hey guys,

I tried asking this on StackOverflow, but people started scratching their heads wondering how I was loading these files (people not familiar with Meteor, apparently) :wink:

So, my issue:

I’ve got one file, let’s say cat.jsx:

class Cat {
  constructor() {
    this.name = 'Fluffy';
  }
}

And in another file, main.jsx, if I reference Cat I get an error that it’s not defined:

cat = new Cat();

How do I make the Cat class globally visible? I want some modularity to my project.

I found a workaround. Not sure if this is the way to do it, but this works:

Cat = class Cat {
  constructor() {
    this.name = 'Fluffy';
  }
}
1 Like

If you want “modularity”, don’t make you classes global !

respectfully, you can’t have globally visible and modular.

if you use webpack, you can use ES2015 modules. If not, use npm modules…

define
let Cat =

then at the end of that file
module.exports = Cat

In a sibling file
{Cat} = require('./cat.js')

Sorry, misuse of terms. By modularity I just meant having my class in its own file. I realize that having something modular is the opposite of occupying the global space. :slight_smile:

Doesn’t this go against the Meteor way of doing things? (i.e., letting it handle the loading files) There’s no other way to do this?

Meteor isn’t tackling modules yet. If you don’t want to wait, you gotta make your path :wink:

2 Likes