Using ES6 / ES2015 with Meteor 1.1.0.3

Mission

Meteor 1.2 is set to ship later this summer.  It will have built-in support for ES2015 (along with support for Angular and React).  I'm really looking forward to this release but I want to start using ES2015 today.  These are my tips on how to get things (mostly) working.

Meteor packages

Most documentation will tell you to add the ecmascript package but it doesn't seem to install just yet.  The following error message appears on both Windows and OSX:

Instead we'll add the Babel package:

meteor add grigio:babel

With Babel (pronounced bay•bull) we can now use ES2015 syntax in our project with the caveat that we have to suffix our files correctly.  The babel package is going to look for files that end in either .es6, es6.js or .jsx).

Using classes

Normally when you declare a class in ES2015 the syntax looks like this:

class Gamer {
   ...
}

Due to the way Meteor bundles files and how variables are scoped you have to this:

Gamer = class Gamer {
   ...
}

Then you'll be able to new up a Gamer object in other files.

Some gotchas

I haven't tested out all ES2015 features but one of the features I couldn't get to work is getters and setters.  At this point, I've just accepted that it's not supported until Meteor 1.2 is released.

class Gamer {
   get name() { return this.name; }
}

Testing with Velocity

Velocity is the defacto test runner to use with Meteor. Depending on which 'reporting' package you install for it, you'll see the results of your tests either in the console or in the browser.  Read more about Velocity here.

There are 2 packages we'll want to install

meteor add sanjo:jasmine

meteor add velocity:html-reporter

I write my tests using Jasmine.  When you use Velocity with Jasmine you need to group your tests under the correct folder structure (under the root of your app):

1. tests/jasmine/client/unit
2. tests/jasmine/client/integration
3. tests/jasmine/server/unit
4. tests/jasmine/server/integration

It seems that only tests found in 1 and 2 above have support for Babel.  Server tests will not work with it.

Hopefully this will help some of you folks that are hoping to use ES2015 features within Meteor and have hit a wall recently.  I know I did.