Posted about 3 years ago. Visible to the public. Repeats.

Using ESNext without a transpiler with the Rails asset pipeline

If your app does not need to support IE11, you can use most ES6 features without a build step. Just deliver your plain JavaScript without transpilation through Babel or TypeScript, and modern browsers will run them natively.

Features supported by all modern browsers include:

  • fat arrow functions (() => { expr })
  • let / const
  • class
  • async / await
  • Promises
  • Generators
  • Symbols
  • Rest arguments (...args)
  • Destructuring

You won't be able to use import and export, or use npm modules.

See this ES6 compatibility matrix Archive for details.

ES6 and Uglifier

If you're using Rails with the assets pipeline Archive (sprockets) you are probably using Uglifier to minify your JavaScript.

Uglifier can minify some, but not all ES6 language features.

Check if you're affected

You can check if that's an issue for your project by running bundle exec rails assets:precompile in your development environment (don't forget to run bundle exec assets:clobber afterwards).

You might get one of these errors:

Copy
The asset "application.js" is not present in the asset pipeline. [...] Uglifier::Error: Unexpected token operator «=», expected punc «,». To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).

If you're encountering a build error, use one of the workarounds below.

Workaround: Use terser-ruby instead

The terser-ruby Archive gem can minify most ES6 features.

To use this gem you also need to upgrade your sprockets dependency to >= 3.

Afterwards you can use terser-ruby as your minifyer:

Copy
config.assets.js_compressor = Terser.new

Workaround: Harmony mode for Uglifier

Uglifier has a "harmony" mode in which it can minify some, but not all ES6 features.

To activate this replace the following line in your staging and production environments:

Copy
- config.assets.js_compressor = :uglifier + config.assets.js_compressor = Uglifier.new(harmony: true)

Flaky tests are tests that sometimes fail for no obvious reason. They are the plague of many end-to-end (E2E) test suites that automate the browser through tools like Capybara and Selenium.

Join our free training event and learn to fix any flaky test suite, even in large legacy applications.

Owner of this card:

Avatar
Henning Koch
Last edit:
5 months ago
by Henning Koch
Keywords:
table
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more