ES6 in Meteor
for the server and the client
UPDATE: The GA has now approved ECMA-262, which is the language specification of ECMAScript 6 (ES6) [infohq].
— Eric Elliott
With Meteor, you are in luck because it is quite simple to get it set up.
UPDATE: As of Meteor 1.2, you should use the official ecmascript package instead of the now deprecated grigio:babel. I updated the article accordingly.
meteor add grigio:babel
Files in your Meteor app with the extensions es6.js, es6 or jsx will be picked up by the package and transpiled to ES5 automatically. This enables you to use ES6 today, without worrying about backwards compatibility. So, let’s see how Meteor code looks in ES6.
This package by the Meteor Development Group replaces the now deprecated grigo:babel package. It enables you to use ES6 directly in all of your .js files. Just like grigo:babel, ecmascript uses Babel behind the scenes to compile ES6 to ES5 code.
meteor add ecmascript
meteor add es5-shim
You should really check out the section “Official ECMAScript 2015 Support” in the upgrade guide for more information.
Babel also supports Source Maps. This means that errors can be traced back from transpiled ES5 code to their origin in the ES6 code as shown in the example below.
As you can see, the error is traced back to the actual places.jsx file, with the original line number and character position.
$ npm install -g eslint babel-eslint
This is a basic configuration file for ESLint that should be placed at the root of your Meteor apps directory. It must be named “.eslintrc”. It is crucial to set the parser to babel-eslint as you can see in line 7. This will enable ES6 features.
You can find more information on linting in Eric Elliott’s article.
I use Sublime Text 3 for development. To get syntax highlighting, you have to install syntax definitions for ES6 using Package Control. I use babel-sublime for this.
Some ES6 ES7 features aren’t available yet. These drawbacks are related to Meteor using ES5 itself. In my experience, these were not an issue in day-to-day development. For the sake of completeness, I’ll mention them anyways:
import / export #9
This is not really a problem with Meteor, as variables are available to you through its own dependency system. No need to import / export anything. Although I would really love seeing MDG switch to this style.
Currently, you can not use the Number constructor in your Meteor code because it would malfunction in Meteors internal checks. That’s why this package ships with a modified version of core-js that lacks the number constructor [commit, issue].
- add grigio:babel to transpile ES6 to ES5
- write ES6 code in .jsx files (.js when using ecmascript package)
- Use ESLint instead of JSLint / JSHint
- Number constructor and import / export statements are not available yet
You can follow me on twitter: @dferber90