Jump to content

Babel, phaser 3 and atom


Recommended Posts

Dear awesome community,

I have a question about transpiling es6 to native javascript/es5.

I am looking for something like atom's typescript plugin, this makes compiling typescript really easy.

There is now a babel plugin which is: language-babel.

I have no clue on how to set this up and what I have to do. There is no actual tutorial / guide to be found.

How do you set up a transpiling system? like the typescript plugin :D

thank you so much in advance :P

Very kind regards,


Link to comment
Share on other sites

Babel has a cli, just use that to transpile.

Learning how to do it properly (rather than rely on some plugin) means that you are in control, need to add modules, then use babel via browserify, decide you dont like browserify and would rather write a load of config, use webpack instead, need to change the things that babel transpiles, no problem, use a new/different preset or plugin etc etc etc.

The documentation for Babel is good and it is now extremely well tested so you should have no problems in quickly and (almost) effortlessly setting up a dev environment using their command line interface.

Link to comment
Share on other sites

thank you for the answer mattstyles,

I did stumble across this video: 

but I didn't got it, it seemed to hard for me to do and the building is not conveniant IMO :/ where as if I just hit save it transpiles and so I can test my project instantly in the browser instead of going to the command every time.

But I think I have almost set everything up so I'll let you know when its working or if I have further questions :D

Thank you for the replies and you certainly helped me :D. I am also following someone who made pong using webpack an he seems really promising !!! ;)



very kind regards,


Link to comment
Share on other sites

The Babel cli has a watcher built in which will rebuild on file save, you can couple this with a livereload implementation which will reload the page automatically as well, depending on the size and/or complexity of your project this can be almost as quick as hitting save and switching to your browser.

The super good thing about this is that when your project reaches a certain level of complexity or maturity you can punt all the actual production build out and use the exact same build process to remotely build, test and deploy your project.

Good luck with the adventure

Link to comment
Share on other sites

hey everyone,

I currently figured out how to set up an entire project with es6

I just make a project with all its folders like: main, app, entities, input ,... and the .es6 or .babel files will transpile localy. All the results will then be used by an index.html file where I call the js files.

as an example I will include a link to my project in the attachment : :P https://github.com/CedricVanRoeyen/ES6-template 

thank you for all your help :D

Very Kind Greets,


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...