By Harvey Ico, backend engineer at Unifa
With the release of Rails 7, webpacker is now optional!? Meaning to say, if you install a new rails application, you will now have to specify that it includes webpacker too. This is how you do it:
rails new myproject -j webpacker
But why did rails decided to remove webpacker as default? Their explanation was:
This bridge is no longer needed for most people in most situations following the release of Rails 7. We now have three great default answers to JavaScript in 2021+, and thus we will no longer be evolving Webpacker in an official Rails capacity.
I was actually surprised myself. I've been using webpacker for 5 years and then now this.. I quite like the Watch feature of webpacker, whereas it compiles and reload your page immediately after saving. Overall, I think webpacker was quite the convenient tool. But yeah, changes are happening very fast specially on the Tech industry.
Now to Rails 7, it seems they are now using Import maps as default.
So I decided to take a look, and try it myself.
Installation
By default, the gem wrapper is installed. But for some reason on my new Rails 7 project, you still have to install it manually.
rails importmap:install
You should see a log:
Add Importmap include tags in application layout
insert app/views/layouts/application.html.erb
Create application.js module as entrypoint
create app/javascript/application.js
Use vendor/javascript for downloaded pins
create vendor/javascript
create vendor/javascript/.keep
Ensure JavaScript files are in the Sprocket manifest
append app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
create config/importmap.rb
Copying binstub
create bin/importmap
If you check carefully, you will see that it inserts a new line to your layouts/application.html.erb. Better double check it just to be sure, mine look like this:
<%= javascript_importmap_tags %>
If you see this line, then you're good.
Okay, so now the installation is done. How do you actually install new javascript library? Turns out, it is pretty simple. So I decided to install one of the library I mostly used, onmount: Run:
./bin/importmap pin onmount
You will see a log:
Pinning "onmount" to https://ga.jspm.io/npm:onmount@1.3.0/index.js
All configurations are saved to config/importmap.rb. So you if check the file, you will see:
# Pin npm packages by running ./bin/importmap pin "application", preload: true pin "onmount", to: "https://ga.jspm.io/npm:onmount@1.3.0/index.js"
And that's it! You can now use your package inside your javascript files.
For example:
app/javascripts/application.js
import onmount from 'onmount';
onmount('body', function () {
console.log('test')
})
onmount()
Final thoughts
Overall, I think importmap-rails is very good. If you are building simple Rails project, and you only need to import javascript packages, then I think it should be enough since it is lightweight and very easy to setup.
But let's say, you are building single page application (SPA) on top of your rails backend api, I think webpacker is still better as it gives you more flexibility. But rails developers were saying they are not going to support new versions of webpacker anymore.. So yea, we'll have to figure it on another time.
Harvey Ico
Unifa is actively recruiting, please check our website for details:
