What's the straightforward, supported, stable way of using ES6 syntax and Javascript minification with Rails?

Question

I'm trying to use ES6 syntax in my Javascript files, in a Rails project. I also need to minify the Javascript files (mine, and the ones included by libraries like rails-ujs) for performance reasons.

When I first generated the project and ran it locally, it worked fine. However, this is because the environment configurations are different for development vs. production. In the development configuration, there is no minification. In the production configuration, Uglifier is used to minify Javascript.

Once I tried to deploy to production, Uglifier and ExecJS started throwing up all kinds of syntax errors, such as not recognizing the const keyword or not recognizing the > in the => operator of arrow functions.

After spending a few hours searching for a fix, I resorted to simply disabling Uglifier so that I could deploy successfully. However, now that my site is in production and working, I would like to make this optimization work.

I'm familiar with Babel and Webpack, and I've used them in other projects (along with some custom scripts) to generate browser-ready ES5 code (for Internet Explorer) and browser-ready ES6 code (for every other browser). If I wasn't using Rails, this would be trivial for me to solve.

However, since I'm using Rails, I need to figure out how to do this in the context of the Rails Asset Pipeline. Surprisingly, there doesn't seem to be any standard way to do this, despite ES6 being 4 years old and supported by every modern browser. It's really weird that Microsoft Edge is way ahead of Rails on this one.

Here's a few suggestions that I've seen, and the problems with them.

• https://github.com/babel/ruby-babel-transpiler

  • Has no documentation indicating how it should be used in the Rails Asset Pipeline.

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

  • Included by default in Rails, but doesn't support ES6 syntax.
  • Mentions "experimental ES6 syntax support", but it doesn't work, even when you enable "Harmony mode".
  • It uses the word "experimental", and I'm trying to use this in a production app. Any serious Javascript tool should have stable support for ES6 by now.

• https://github.com/fnando/babel-schmooze-sprockets

  • Unclear documentation, includes a lot of caveats about having to do weird nonstandard things like call .default() on all of your imports.

• https://nandovieira.com/using-es2015-with-asset-pipeline-on-ruby-on-rails

  • Mentions having to use a "pre-release version" of Sprockets. I'm trying to use this in a production app, and I don't think that I'm being unreasonable by expecting to be able to do this with stable versions of libraries. The article is 3 years old, but I can't find a more recent version.

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

  • Has a few suggestions, but none of them are self-contained solutions, and this is almost 3 years old. I expect that there's a specific, stable way to do it by now?

• https://revs.runtime-revolution.com/want-to-use-es6-with-rails-right-now-webpack-to-the-rescue-ebefb2004e9e

  • This is pretty much what I'd do if I had to do all of my ES6 support outside of the Rails Asset Pipeline. Surely, there's a way to do this without stepping outside of Rails and compiling my Javascript code manually?

• https://github.com/babel/minify

  • Still in beta. I'm trying to use this for a production site.