How do I use ES6 (ES2015) in a ruby on rails app?

Question

I have a 4.2 rails app and am considering slowly converting the JS to ES6. Right now I'm using the standard rails manifest file from the asset pipeline to pre-process my js.

I'm not sure how to go about starting to use ES6 (adding a transpile step) in my rails app.

Is there a built-in method, or a recommended tool or workflow?

Answer 1

At present unfortunately there isn't really a 'standard' way of doing this - a lot of it depends on the requirements of your app and if you are able to upgrade Sprockets and/or Rails.

Option 1: Stay on Rails 4.2 and Sprockets 3, then use this gem to add ES6 support and gradually migrate to ES6 modules: https://github.com/rmacklin/sprockets-bumble_d

Option 2: Upgrade to Sprockets 4 (still in beta), then use either https://github.com/fnando/babel-schmooze-sprockets or https://github.com/babel/ruby-babel-transpiler to add babel for ES6 support. Both have pretty solid documentation.

Option 3: Use webpack either instead of or alongside sprockets. A google search will reveal some approaches for this. Rails 5.1 (still in beta) will introduce native webpack (and thus babel) support via the webpacker gem. Admittedly this may be the more difficult option for an existing application. There is a good article about it here: https://medium.com/statuscode/introducing-webpacker-7136d66cddfb#.cb4sixyah

Answer 2

Answering for myself 3 years later...

Rails > 5.1 has webpacker and native support for webpack builds and various front end frameworks if desired (react, vue, etc)

Answer 3

Replace this in your production.rb file

config.assets.js_compressor = :uglifier

with this

config.assets.js_compressor = Uglifier.new(harmony: true)

For dev, Chrome compiles es6.

https://github.com/lautis/uglifier

https://www.rubydoc.info/gems/uglifier