How Rails 7 uses import maps

Rails has a big change for Javascript ecosystem. It migrates from webpack to import maps.

We have different way to import a javascript file.

import { foo } from "./foo.js"
import foo from "./foo.js"
import { foo } from "/src/foo.js"
import foo from "https://bar.com/foo.js"

So how do the import maps work?

Import the npm

It’s the name, it maps the javascript files to the names which are used in import syntax.

pin "fontawesome", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.1.1/js/all.js"
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"

So in the appliaction.js we import them like this.

import "fontawesome"
import jquery from 'jquery'

Import the custom javascript

pin_all_from "app/javascript/lib", under: "lib"

import { renderSignaturePad } from "lib/render_singature_pad";

Using the import maps we don’t need to change the import code. If we need a new version or maybe we want to use another module, we just map another file.

pin_all_from is like the name, it pins all files in the same folder. We can provide :under option like a first folder name to import.

Let’s make it easy.