How to use ES6/PostCSS without Webpack?

rubyonrails-talk
#1

Is it possible to configure a webpack/node-free Rails app with ES6, Hotwire, Tailwind, PostCSS and appropriate tooling such as minification, transpiling, fingerprinting?

The Rails asset pipeline and JS docs talk about Coffeescript and Sass but there is no mention of ES6 or PostCSS or how to transpile code to ensure browser compatibility (or maybe it is deemed unnecessary?).

What is Basecamp’s or other companies’ approach to this? I was under the impression that Basecamp doesn’t use Webpack which gives me some hope that a solution exists, but I might be wrong?

Disclaimer: I am no front-end dev expert and would welcome any pointers to educate myself. I am just trying to weigh whether I could do without webpack/node’s complexity in my Rails-with-JS-sprinkles app.

1 Like
#2

Yes.

  • Use option --skip-webpack-install when generating a new app
  • remove Webpacker from Gemfile and bundle install
  • Add //= link_directory ../javascripts .js to app/assets/config/manifest.js
  • Restore app/assets/javascripts/application.js (copy from a Rails 5 repo)
  • Change javascript_pack_tag to javascript_include_tag in app/views/application/layout.html.erb
#3

Thanks Tdak. Yes an app can be generated to only use the asset pipeline without Webpack, but what about ES6 transpilation, for instance to get compatibility with the X latest versions of major browsers or to have X% compatibility according to the caniuse database? How to verify if this is performed correctly? And what about other Javascript and CSS features that are not yet widely adopted?

For Tailwind I can give a try with the new tailwindcss-rails.

#4

There’s some development in progress / experiment with Skypack and ESM that would allow for a webpack-free deployment of modern JS. A discussion of this same topic: Tuts / Examples for Hotwire + Asset pipeline + Skypack? - Hotwire Discussion

#5

Thanks @Bruno_Bonamin! So transpiling is out, we rely on browsers’ native capabilities to interpret the code and load JS modules (caniuse says 93% of browsers can handle them), but:

  • we need a HTTP/2 server, is this the case with Heroku + Puma + CloudFlare (which is what I use)?
  • we are still missing fingerprinting and cache headers according to DHH

I’ll try to experiment with JS modules when I have a chance and I’ll be looking forward to concrete examples of Rails apps using this pattern.

#6

I use Heroku in production too. Unfortunately it does not currently support HTTP/2 HTTP Routing | Heroku Dev Center

#7

Is this solved by adding Cloudflare with HTTP2 in front?

#8

Is your goal to avoid webpack specifically, or node as a whole? Snowpack is a lot simpler than webpack, and there’s a snowpacker gem for rails. But it’s still node.

There’s also a new Sprockets-like asset pipeline called condenser that can do some of the stuff you want, but I haven’t tried it yet.

More Resources

Keep up to date with Rails on Twitter and This Week in Rails

Policies: Conduct, License, Maintenance, Security, Trademarks