logo

Jak migrovat z webpackeru na jsbundling-rails (esbuild)

  1. Nainstalujte jsbundling-rails
  2. Vyměňte pack_tag za include_tag
  3. Importujte ovladače stimulů
  4. Migrujte vstupní bod JS
  5. Odeberte webový balíček
  6. Akce Github
  7. Heroku

1. Nainstalujte jsbundling-rails

Přidat do gemfile:

gem 'jsbundling-rails'

V terminálu spusťte:

bundle install
rails javascript:install:esbuild

2. Vyměňte pack_tag za include_tag

Soubor jsbundling:install příkaz vloží javascript_include_tag značku nad značkou ve vašem application.html.erb soubor. Tato značka bude obsahovat nový vstupní bod javascriptu javascript/application.js aby byl váš sestavení skript zahrnut do vaší aplikace.

Odstraňte starší webový balíček stylesheet_pack_tag :

# old
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>

# new
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

Pokud vaše aplikace vykresluje více rozvržení, nezapomeňte odstranit všechna javascript_pack_tag tam taky.

3. Importujte ovladače stimulů

I když jste již nainstalovali stimul, spusťte příkaz install znovu ve svém terminálu a přepište všechny konfliktní změny. Tím se správně naimportuje veškerý váš stávající regulátor stimulů. 

rails stimulus:install

Nyní, po přidání nebo odebrání nového ovladače stimulů, můžete použít příkaz, který automaticky vygeneruje controllers/index.js soubor. 

rails stimulus:manifest:update

4. Migrace vstupního bodu JS

Přesunout obsah z javascript/packs/application.js na
javascript/application.js . Po migraci souboru odstraňte složku javascript/packs, kterou používal Webpacker.

Ujistěte se, že importujete adresáře v javascriptu složku s relativní cestou. 

// old
require("channels")

//new
import "./channels"
import "./controllers"

5. Odeberte webpack

Webpack a jeho chapadla lze konečně odstranit z aplikace.

A. Odstraňte drahokam webpacker

gem 'webpacker', '~> 5.4'

B. Odeberte balíčky webpack

Balíčky a zásuvné moduly Webpack, které se časem nashromáždily, lze také odstranit. Pro mě to zahrnovalo:

  • @rails/webpacker
  • webový balíček
  • webpack-cli
  • webpack-cli/serve
  • webpack-dev-server
  • clean-webpack-plugin
  • @hotwired/stimulus-webpack-helpers

C. Odeberte soubory webpack

Nakonec odstraňte všechny konfigurační a spouštěcí soubory:

  • bin/webpack
  • bin/webpack-dev-server
  • config/webpacker.yml
  • config/webpack (adresář)

6. Akce Github

Pokud používáte Github Actions jako CI/CD, nezapomeňte přidat další krok sestavení, abyste spustili sestavení příze. Sestavení příze spustí krok sestavení definovaný ve vašem package.json soubor:"build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds" . Před spuštěním testů v souboru pracovního postupu je třeba sbalit všechny soubory javascriptu. 

- name: Build Esbuild
  run: yarn build

7. Heroku

AKTUALIZACE tento krok je nyní nadbytečný, jak uvádí @jrochkind v komentářích. Viz https://devcenter.heroku.com/changelog-items/2284.

Pokud k nasazení aplikace používáte heroku, Heroku NE automaticky nainstaluje přízi jako u Webpacku!**

Proto musíme explicitně nastavit buildpack uzlu před ruby. Můžete to udělat v terminálu nebo na Heroku Dashboard.

  • Terminál
heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby
  • Hlavní panel

Zdroje:

  • ** Děkujeme Robovi za blogování o kroku chybějící příze
  • Jak používat ESBuild s JS Bundling in Rails