Esbuild Anpassungen

Bridgetown basiert auf Jamstack ( Javascript – Api – Markup ). JavaScript-Dienstprogramme unterstützen die Darstellung von Web-Inhalten. Dynamische Inhalte benötigen später gar keine oder nur noch minimale Serverunterstützung.

Wichtig: Serverseitig ist Node.js erforderlich. Auf der Clientseite kann Javascript auch deaktiviert sein. Dann ist nur das CSS-Bundle aktiv.

esbuild erstellt ein Archiv mit den zu übertragenen Dienstprogrammen.

esbuild-config.js

Das Bundling der Quellen wird über die Datei esbuild.config.js gesteuert. Die Quellen werden via yarn auf dem Server installiert.

So muss für das Bridgetown-Searchbar-Plugin die Javascript-Komponente hotkeys-js vorhanden sein:

yarn add hotkeys-js

Die Konfigurations-Datei ist normalerweise leer:

const build = require("./config/esbuild.defaults.js")

// Update this if you need to configure a destination folder other than `output`
const outputFolder = "output"


build(outputFolder, esbuildOptions)

Ruby2Js

Um das Dienstprogramm ruby2js verwenden zu können und so Javascript-Anweisungen in der ruby-Syntax verfassen zu können, muss es manuell eingefügt werden. Fortan wird der Javascript-Teil nicht mehr über frontend/javascript/index.js sondern über die Ruby-Datei frontend/javascript/indes.js.rb initialisiert.

Die folgende Deklaration muss vor build eingefügt werden:

const ruby2js = require("@ruby2js/esbuild-plugin")

const esbuildOptions = {
  entryPoints: ["frontend/javascript/index.js.rb"],
  target: "es2022",
  plugins: [
    ruby2js({
      eslevel: 2022,
      filters: ["camelCase", "functions", "lit", "esm", "return"]
    }),
  ],
  format: "esm",
  splitting: true
}

Fehlermeldung

Ohne diese Anpassung funktioniert das Bundling nicht.

Will man die “Hello-world”-Ruby-JavaScript-Komponente einsetzen, kommt folgende Fehlermeldung hoch:

Frontend] esbuild: frontend bundling started...
[Frontend] ✘ [ERROR] No loader is configured for ".rb" files: src/_components/hello_world.js.rb
[Frontend]
[Frontend]     import-glob:../../src/_components/**/*.{js,jsx,js.rb,css}:2:100:
[Frontend]       2 │ ...;import * as module1 from '../../src/_components/hello_world.js.rb'
[Frontend]

Der Loader wird durch den neuen EntryPoint bereitgestellt.