Frontend in Rails will be very different from Rails 6.
In this article:
Webpacker was the gem that Rails used to integrate Webpack, and Webpacker 5 will be the last version. The Webpacker 6 release candidate is now going to be community-maintained under a new name. (source)
There are now 3 options that I know about:
importmap-rails — This gem is the new Rails 7 default. The importmap-rails gem allows using npm packages in the Rails asset pipeline.
jsbundling-rails — An alternative that unifies support for any Node.js-based bundler (Webpack, Rollup, esbuild) under one gem. However, it only supports a subset of features that Webpacker does.
shakapacker — A community-supported continuation of Webpacker maintained by Shakacode, now called Shakapacker.
importmap-rails gem will come pre-loaded in Rails 7, and seems to be the answer to the question “how do I use npm packages in Rails?”.
Import-map is a lightweight tool to transform imports from npm module names (eg,
“react”) into URL’s, useful for loading scripts from an external CDN.
import in the browser is natively supported by all modern browsers—no bundlers needed! Importing URL’s inside a script tag should work. (docs)
No npm/yarn required. It can be used with npm, but the recommended experience appears to be to use the jspm.org CDN. (article)
Limited React support. Because there is no compilation step, there is no support for build-time JSX compilation (it would have to be done on runtime using something like htm).
Limited legacy browser support. import-map relies on
<script type="module"> which is not supported on IE11. (caniuse)
application.js, import-map will load all files individually(!).
No tree-shaking. Since npm packages are loaded as-is (and often from a CDN), the benefits of removing unused code (“tree-shaking”) isn’t available when using importmap-rails. ⚠️
HTTP2/SPDY is needed. Well, not required, but HTTP2 multiplexing will be needed to make loading hundreds of JS files a practical solution. (codavel.com: HTTP2 Multiplexing explained) ⚠️
The jsbundling-rails gem appears born out of the desire to use Webpack alternatives in Rails.
While Webpacker offered very tight integration with Webpack (even its configs are in Ruby and Yaml), jsbundling-rails is a more “lightweight” integration. The main source code is less than 20 lines: all it does is invoke “yarn install && yarn build” before asset precompilation.
Seems straightforward. The goal is to set up Webpack as you would in a Node.js project (eg, work without Webpacker) and that’s it. The jsbundling-rails migration guide has more details.
No code splitting support. Webpack’s ability to lazy-load certain parts of the bundle is not supported. (webpack.js.org: Code splitting)
No hot reloading. Be ready to press F5 a lot.
The work on Webpacker has been continued by ShakaCode and was named for their company. Shakapacker is based off of the unreleased Webpacker 6. (The last Webpacker version is 5.)
|npm modules||CDN only||✅||✅|
|Hot module reloading||-||-||✅|
|React JSX support||-||✅||✅|
|Delivery to the end user||Multiple files||Bundled||Bundled|