How to use ES6 as Meteor default js as discussed in the recent blog


#1

Greetings,

I just recently read the Meteor blog post talking about 1.2.
Matt mentioned the ability to use ES6 , and encouraged that we start using it now in our app development with Meteor.
Does anyone have instructions or know the preferred Meteor route to using ES6 vs. the old JS ?


ES6 support in Meteor - standards
#2

I’m using the Babel package: https://atmospherejs.com/grigio/babel . I’m almost certain that the built in ES6/7 will be transpiled with Babel as well.


#3

You can simply do with meteor add react.
Then use .jsx as the syntax for your ES6 JS files.


#4

This has to be a joke, right? React’s JSX is an XML-based templating format that is completely different from ES6.


#5

@mizzao No it’s not. You can write es6 in a jsx file and it will be transpiled to es5. You can completely swap out all your js files with jsx.


#6

Nope, :smile: I also used to think JSX was a templating language.

The React package uses Babel to transform JSX files. You can use any ES6/7 and it will still compile down to ES5.

The JSX isn’t a whole template file, rather it just parses <div name='bob'></div> and then transpiles it to a function like React.DOM.div({ name: 'bob' });. If there’s any es6 syntax it’ll transpile that too. React heavily uses ES6/7 in the component.

However I do think the extension may be a bit confusing for other team members :smile:


#7

Thank you I will give that package a shot


#8

Great, thanks for helping me update my knowledge :slight_smile:


#9

I also just found this, it seems to be related to a blog post: https://github.com/meteor/babel

It seems more legit than just adding react, right? Matt’s blog post seems to suggest how we can use it now, but there are no instructions on how to do so.

See also: https://github.com/meteor/babel/issues/3


The General Assembly will vote on approval of ES6 this month. Here's how to get started with ES6 in Meteor today
#10

meteor add babel

then use .es6 as extension for your JS files (or .jsx)

JS2015 is cool, as it is less verbose than ES5, but even if you use ES5 you’ll see it’s easier to debug, the error outup is much more human.


#11

There is no such package babel. Do you mean grigio:babel? I’m trying to use whatever MDG is going for in 1.2 as opposed to that, because it’s going to be obsoleted.

I do see babel-compiler and babel-runtime, but not sure how they work with a Meteor 1.1 app. They seem to be intermediate packages for the transpiling process that are not hooked in to the whole pipeline yet.

Shout-out to @benjamn if possible


#12

Thank you that’s better solution then Grigio babel


#13

Yes an idea of how to use it natively with Meteor ?


#14

yes I meant grigio:babel

this one is different, it’s called meteor-babel, and it looks like hte official one that will be included with meteor 1.2


#15

I couldn’t find this one at atmosphere, but there’s one named just plain ‘jsx’ from mdg that says it also has has react and react-meteor-data as dependenants, but only actually installs babel-compiler and babel-runtime. i.e. it’s the Babel on which react depends. Oddly, the JSX it shows on the Atmosphere page contains React style markup in the code, so I’m a little confused…


#16

JSX is the package that react requires when you do meteor add react this allows you do build your own react stack in case you want to use CJSX with coffeescript or something (or some people don’t use JSX with React also).