Import maps (Rails 7+) - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an import map in Rails 7+?

An import map is a way to manage JavaScript module imports directly in the browser without needing a bundler. It tells the browser where to find JavaScript files by mapping module names to URLs.

beginner

How does Rails 7+ use import maps to load JavaScript?

Rails 7+ uses import maps to load JavaScript modules by defining mappings in a file called importmap.rb. The browser reads these mappings and loads the modules from specified URLs, often from CDNs or local assets.

intermediate

What command do you run to pin a JavaScript package using import maps in Rails 7+?

You run `bin/importmap pin <package-name>` to add a package to your import map. This command updates the importmap.rb file and downloads the package if needed.

intermediate

Why might you choose import maps over bundlers like Webpack in Rails 7+?

Import maps let you avoid complex bundler setups. They simplify JavaScript management by loading modules directly in the browser, which can speed up development and reduce configuration.

beginner

How do you include the import map in your Rails 7+ HTML layout?

You include `<%= javascript_importmap_tags %>` in your application layout. This helper inserts the necessary script tags for the browser to load the import map and modules.

What file in Rails 7+ typically holds the import map configuration?

A config/routes.rb

B app/javascript/application.js

C config/importmap.rb

D app/assets/stylesheets/application.css

The import map configuration is stored in config/importmap.rb where you pin JavaScript packages.

Which command pins a package to the import map in Rails 7+?

A bin/importmap pin package-name

B npm install package-name

C yarn add package-name

D rails pin package-name

The correct command is bin/importmap pin package-name to add packages to the import map.

What does the helper `<%= javascript_importmap_tags %>` do in Rails 7+?

A Includes CSS stylesheets

B Loads JavaScript modules using the import map

C Defines routes for JavaScript files

D Compiles JavaScript into one file

This helper inserts script tags that load JavaScript modules based on the import map.

Why might import maps improve development speed in Rails 7+?

A They avoid the need for a bundler and complex setup

B They automatically minify CSS

C They bundle all JavaScript into one file

D They replace Ruby code with JavaScript

Import maps let you load modules directly in the browser, avoiding bundler setup and speeding development.

Where do import maps load JavaScript modules from?

A From Ruby gems

B Only from npm registry

C Only from local files

D From URLs defined in the import map, including CDNs or local assets

Import maps map module names to URLs, which can be local files or CDN links.

Explain how import maps work in Rails 7+ and why they are useful.

Think about how the browser finds JavaScript files without bundling.

Describe the steps to add a new JavaScript package using import maps in Rails 7+.

Consider the command and how the package becomes available in the app.