25

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?

pixelearth
  • 13,674
  • 10
  • 62
  • 110
  • 1
    A quick google search shows [this article](http://nandovieira.com/using-es2015-with-asset-pipeline-on-ruby-on-rails) that might be of use to you. – Greg Tarsa Feb 25 '17 at 20:41
  • You want to use babel. This gem might do it for you. https://github.com/babel/ruby-babel-transpiler – Andy_D Feb 25 '17 at 22:52

3 Answers3

19

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

Mike
  • 987
  • 11
  • 13
  • "Ruby Babel Transpiler Ruby Babel is a bridge to the JS Babel transpiler. require 'babel/transpiler' Babel::Transpiler.transform File.read("foo.es6") Installation $ gem install babel-transpiler Dependencies This library depends on the babel-source gem which is updated any time a new version of Babel is released. ExecJS The ExecJS library is used to automatically choose the best JavaScript engine for your platform. Check out its README for a complete list of supported engines." – Andrew Koster Aug 21 '19 at 21:14
  • 2
    I wouldn't say that something has "solid documentation" when its entire documentation page can fit in a StackOverflow comment, with room left to spare in the 600-character limit. – Andrew Koster Aug 21 '19 at 21:15
  • 1
    It tells you how to use it from Javascript, but not from Rails (Rails is not a Javascript backend, so the sample backend code in Javascript is pretty useless in the context of Rails). – Andrew Koster Aug 21 '19 at 21:16
5

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)

pixelearth
  • 13,674
  • 10
  • 62
  • 110
2

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

Tom Hall
  • 283
  • 3
  • 5