Rails Importmap: Simplificando a Importação de Pacotes Javascript no Rails

Por Avila, 3 Novembro, 2024
Rails importmap gem

A partir do Rails 7, a importação de pacotes JavaScript se tornou mais simples e leve, graças ao Rails Importmap. Esse recurso permite importar pacotes JavaScript diretamente em aplicações Rails, sem a necessidade de ferramentas complexas como transpilers ou bundlers (como Webpack, Yarn, npm) e, mais surpreendentemente, sem a necessidade de ter o Node.js instalado.

O que é Importmap?

O Importmap permite que os desenvolvedores façam uso de pacotes JavaScript sem precisar configurar processos de build complexos. Com ele, o desenvolvimento front-end fica muito mais fluido, possibilitando que você foque na construção da aplicação em si, sem se preocupar com configurações adicionais de ambiente. Para rodar sua aplicação com Importmap, basta iniciar o servidor Rails normalmente usando o comando:

$ bin/rails server

Essa simplicidade e leveza fazem com que o Importmap seja uma ótima alternativa para projetos que não requerem uma grande quantidade de manipulação de front-end, ou quando se deseja uma solução mais minimalista para gerenciar dependências JavaScript. Um exemplo disso é quando precisamos fazer uso dos pacotes como PopperJs (responsável pela interatividade do bootstrap), Font Awesome ou Material icons.

Como Instalar o React Usando Importmap no Rails

Se você deseja usar o React em uma aplicação Rails com Importmap, o processo é direto e rápido. Em vez de configurar uma série de dependências, você só precisa usar o comando do Importmap para “fixar” o pacote. No terminal, execute:

$ bin/importmap pin react react-dom

Isso vai baixar os pacotes do CDN para a pasta vendor/javascript e adicionar o React e o ReactDOM como dependências de sua aplicação Rails, sem a necessidade de realizar uma instalação via npm ou configurar bundlers.

Após o comando acima, você pode importar o React no arquivo application.js da sua aplicação. Basta incluir:

import React from "react" import ReactDOM from "react-dom"

Com isso, o React está disponível para ser usado em seu projeto Rails, oferecendo uma experiência de desenvolvimento simples e ágil.

Conclusão

O Importmap no Rails 7 oferece uma alternativa poderosa para gerenciar pacotes JavaScript sem o peso e a complexidade das stacks tradicionais. É ideal para quem busca uma configuração mais leve e direta, possibilitando uma experiência de desenvolvimento descomplicada e eficiente. Se você deseja experimentar algo mais simples no front-end da sua aplicação Rails, vale a pena explorar o Importmap, além de ser um conhecimento essencial para programadores Rails, desde que seu uso foi convencionado pelo core team do framework.

Comentários