Siirry pääsisältöön

Frontend-bundler 26.01

Avaa ChatGPT:ssä

Frontend-bundleri mahdollistaa webforJ-luokan hyödyntävän npm ekosysteemiä, komponenttien kirjoittamisen React, Svelte tai Lit avulla sekä SCSS -koodin laatimisen, kaikki Java-projektista ilman Node-työkaluketjun asentamista tai käyttöä. Luokka nimeää tarvitsemansa frontendin annotaatiolla, ja rakentaminen asentaa paketit, kääntää lähdekoodit ja lataa tuloksen, kun kyseisestä luokasta luodaan komponentti.

Bundleri toimii osana webforJ-build-pluginia, joka lisätään kerran Maven- tai Gradle-rakennukseen. Tietynlaisten lähdejärjestelmien, kuten SCSS:n, Less, Tailwind jne., kääntäminen on laajennusten vastuulla.

Kun tarvitset bundlerin​

webforJ toimii ilman bundleria. Jos sinulla on jo skripti tai tyylitiedosto ja haluat liittää sen komponenttiin tai sovellukseen, assets-annotaatiot tekevät sen ilman rakentamisvaihetta, ilman npm:ää ja ilman käännöstä.

Bundleri ansaitsee paikkansa, kun frontend on enemmän kuin staattinen tiedosto:

  • Haluat paketin npm:stä, nimeltä ja versiolta, asennettuna ja käännettynä sovellukseesi.
  • Haluat kirjoittaa komponentin Reactissa, Sveltessä tai Litissä ja käyttää sitä Javasta.
  • Haluat laatia SCSS-, Sass- tai Less-tiedostoja tai kääntää Tailwind-työkaluja.
  • Haluat suorittaa frontend-testit osana rakennusprosessia.

Bundleri on oletuspolku tälle työlle, ja se tekee kaiken, mitä assets-annotaatiot tekevät, joten projekti, joka ottaa sen käyttöön, ei menetä yksinkertaisempaa vaihtoehtoa.

Sen lisääminen olemassa olevaan projektiin​

Bundleri on valinnainen, joten voit lisätä sen sovellukseen, joka jo käyttää assets-annotaatioita, ja käyttää sitä vain siellä, missä tarvitset.

  1. Lisää webforJ-build-plugin Maven- tai Gradle-rakennukseesi. Se hallinnoi Bunia puolestasi, joten Node-työkaluketjua ei tarvitse asentaa.
  2. Laadi frontend-lähteesi kansioon src/main/frontend.
  3. Julista, mitä luokka tarvitsee, käyttämällä @BundlePackage ja @BundleEntry.

Olemassa olevat @StyleSheet, @JavaScript ja muut assets-annotaatiot toimivat muuttumattomina, joten voit siirtää resurssin bundlerin käyttöön, kun tarvitset pakettia, käännettyä lähdettä tai testiä, ja jättää loput rauhaan.

Luokan sitominen merkintään​

@BundleEntry sitoo luokan frontend-merkintään, ja @BundlePackage julistaa npm-paketit, joita merkintä tuo. Molemmat sijaitsevat luokassa, joten tarvittava frontend näkyy näkymän mukana.

GreetingView.java
@Route("/greeting")
@BundlePackage(value = "lit", version = "^2.0.0")
@BundleEntry("greeting/hello-greeting.ts")
public class GreetingView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public GreetingView() {
    self.add(new Element("hello-greeting"));
  }
}
greeting/hello-greeting.ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement("hello-greeting")
class HelloGreeting extends LitElement {
  render() {
    return html`<p>Greetings from webforJ</p>`;
  }
}

Merkintä rekisteröi hello-greeting -räätälöidyn elementin ja omistaa sen renderöinnin. Java-puoli käyttää sitä new Element("hello-greeting") ja kuuntelee sen tapahtumia. Rakennus kääntää merkinnän, asentaa lit-kirjaston ja lataa tuloksen, kun /greeting renderöidään.

Aiheet​