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