Cedric

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,

Cedric 

Share this post


Link to post
Share on other sites

Hey LukaMis,

Thank you for your response but I'm looking for a babel specific transpiling manner.

Kind regards,
Cedric

Share this post


Link to post
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.

Share this post


Link to post
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 !!! ;)

http://blog.oliverbenns.com/tag/pong/

 

very kind regards,

Cedric

Share this post


Link to post
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

Share this post


Link to post
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,

Cedric

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.