Cedric Posted March 5, 2016 Share Posted March 5, 2016 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 thank you so much in advance Very kind regards, Cedric Link to comment Share on other sites More sharing options...
lukaMis Posted March 5, 2016 Share Posted March 5, 2016 I use Prepros. It has checkbox that you check for transpiling to es5. Link to comment Share on other sites More sharing options...
Cedric Posted March 6, 2016 Author Share Posted March 6, 2016 Hey LukaMis, Thank you for your response but I'm looking for a babel specific transpiling manner. Kind regards, Cedric Link to comment Share on other sites More sharing options...
mattstyles Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
Cedric Posted March 6, 2016 Author Share Posted March 6, 2016 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 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 Link to comment Share on other sites More sharing options...
mattstyles Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
Cedric Posted March 7, 2016 Author Share Posted March 7, 2016 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 : https://github.com/CedricVanRoeyen/ES6-template thank you for all your help Very Kind Greets, Cedric Link to comment Share on other sites More sharing options...
eXilz Posted March 7, 2016 Share Posted March 7, 2016 As I mentioned on your other topic, you should definitely check out https://github.com/belohlavek/phaser-es6-boilerplate ! It's great Link to comment Share on other sites More sharing options...
Recommended Posts