ES6 classes and scope


#1

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.


#2

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

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

#3

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


#4

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')


#5

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?


#6

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