Asset pipeline: Importmaps
O curso mostra como uma aplicação Rails 8 carrega JavaScript com importmaps, sem Node.js e sem etapa de build. Ele trata da API pin em config/importmap.rb, do Propshaft como servidor de assets que aplica fingerprint e serve arquivos, e do registro de controllers Stimulus a partir dos nomes de arquivo. Também apresenta o fluxo do bin/importmap para pacotes vendorizados ou de CDN e as questões de produção: preloading de módulos, cache longo e Content Security Policy. A última aula percorre o caminho completo de um pin até o código rodando no navegador.
O que você vai aprender
- ✓Como o navegador resolve módulos por um importmap, sem bundler
- ✓Mapear módulos para arquivos com pin, pin_all_from, to: e under:
- ✓Como o Propshaft serve assets, aplica fingerprint e busca nos caminhos de carga
- ✓Como caminhos de arquivo viram identificadores de controllers Stimulus e são registrados
- ✓Adicionar, atualizar, auditar e remover pacotes com bin/importmap
- ✓Preloading de módulos, cache de assets e Content Security Policy em produção
O que é um importmap: sem bundler necessário
A maioria dos frameworks JavaScript requer uma etapa de build: um bundler como Webpack, esbuild ou Vite que transforma, concatena e minifica seu JavaScript antes do navegador poder usá-lo. Rails 8 adota uma abordagem diferente: importmaps. Sem Node.js. Sem node_modules. Sem etapa de build para…
Ler a aula completa grátis →Currículo
7 aulasO que é um importmap: sem bundler necessário
Mostra como importmaps deixam o navegador resolver módulos JavaScript sozinho, sem bundler, Node.js ou node_modules.
A API pin: mapeando módulos para arquivos
Trata de pin, pin_all_from, pins de CDN e vendorizados, o JSON resolvido e a ordem de busca do Propshaft.
Propshaft: o servidor de assets moderno
Descreve como o Propshaft serve e aplica fingerprint em assets, como difere do Sprockets e onde entra o Tailwind CSS.
Carregamento de controllers Stimulus com importmaps
Acompanha como eagerLoadControllersFrom registra controllers e como caminhos de arquivo viram identificadores como ui--flash.
Adicionando uma dependência JavaScript
Percorre os comandos do bin/importmap para pinar, remover, atualizar e auditar pacotes, e a escolha entre vendor e CDN.
Produção: preloading, caching e CSP
Aborda tags modulepreload, a opção preload: false, pré-compilação de assets, cache de um ano e regras de Content Security Policy.
Asset pipeline: juntando tudo
Segue o caminho completo de config/importmap.rb até o Stimulus conectar controllers, com checklists para bibliotecas e controllers novos.