Ein Bundle ist zu einem wichtigen Werkzeug im Toolkit jeder modernen Node.js-Anwendung geworden. Bundler-Webpack, Roll up, Vite -Verwaltung und Paketierung von Code und Assets. Sie fassen viele verschiedene Dateien zu einem oder wenigen optimierten Paketen zusammen und verbessern so die Leistung, indem sie die Anzahl der Netzwerkanfragen reduzieren und den zu ladenden Code effektiv bereitstellen. Außerdem verfügen die meisten Pakete bereits über Extras wie Code-Splitting, Hot Module Replacement und Tree Shaking, die die Erfahrung als Entwickler und Endbenutzer verbessern.

Bundler sind durch ihre Integration in Build-Tools und moderne JavaScript-Standards ein entscheidender Faktor für skalierbare und wartbare Anwendungen, da sie die Bereitstellung von Ressourcen optimieren und reibungslose Arbeitsabläufe ermöglichen. In diesem Artikel wird die NPM Fuse Box als Benchmark-Beispiel für einen Bundler mit der IronPDF for Node.js-Bibliothek verwendet.

Einführung

Die FuseBox NPM-Package ist der schnellste, kontextgesteuerte und zukunftsweisende Bundler, mit dem Sie die Assets Ihrer modernen Webanwendungen mühelos verwalten und bündeln können. Was die Effizienz der Entwickler betrifft, so verfügt der FuseBox-Modul-Loader über eine einfache Konfiguration, die es dem Entwickler ermöglicht, sein Projekt schnell einzurichten und zu starten. Sie unterstützt alle gewünschten Funktionen: Live-Reloading, Code-Splitting, Tree-Shaking usw., was die Entwicklung vereinfacht und die endgültige Ausgabe hoch optimiert.

FuseBox unterstützt viele Dateitypen: JavaScript, TypeScript, CSS und Bilder. Der FuseBox-Modul-Loader lässt sich problemlos in gängige Frameworks und Bibliotheken integrieren. Darüber hinaus verfügt sie über ein integriertes Plugin-System, mit dem Sie FuseBox weiter ausbauen und an die Bedürfnisse Ihres Projekts anpassen können. Durch die Ausgewogenheit von Leistung und Benutzerfreundlichkeit wird FuseBox Ihren Entwicklungs-Workflow erheblich beschleunigen und für die Produktion optimiert sein. FuseBox hebt das auf ein ganz neues Niveau.

Um ein FuseBox-Projekt zu erstellen und zu konfigurieren, gehen Sie folgendermaßen vor:

Initialisieren eines neuen Node.js-Projekts für FuseBox

Erstellen Sie ein Verzeichnis für Ihr Projekt und öffnen Sie es dann in Node.js.

mkdir fusebox-project
cd fusebox-project
npm init -y

So installieren Sie fuse-box

Installieren Sie fuse-box und andere Abhängigkeiten wie TypeScript, wenn Sie es verwenden.

npm install fuse-box typescript --save-dev

FuseBox-Konfigurationsdatei erstellen

Erstellen Sie eine fuse.js-Datei für die Konfiguration von FuseBox.

const { fusebox, sparky } = require('fuse-box');
class Context {
//node fuse dist
  getConfig() {
    return fusebox({
      target: 'browser',
      entry: 'src/index.ts',
      webIndex: {
        template: 'src/index.html',
      },
      devServer: true,
      hmr: true,
      cache: true,
      logging: {
        level: 'succinct',
      },
      sourceMap: true,
    });
  }
}
const { task, exec, rm } = sparky(Context);
task('default', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runDev();
});
task('dist', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runProd();
});

const { fusebox, sparky } = require('fuse-box');
class Context {
//node fuse dist
  getConfig() {
    return fusebox({
      target: 'browser',
      entry: 'src/index.ts',
      webIndex: {
        template: 'src/index.html',
      },
      devServer: true,
      hmr: true,
      cache: true,
      logging: {
        level: 'succinct',
      },
      sourceMap: true,
    });
  }
}
const { task, exec, rm } = sparky(Context);
task('default', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runDev();
});
task('dist', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runProd();
});

In diesem einfachen Beispiel geht es um die Konfiguration und Verwendung von FuseBox zur Durchführung von Bündelungs- und Entwicklungsaufgaben in einer Node.js-Umgebung. Die FuseBox-Plugin-Funktionen ermöglichen es uns, mehrere Plugins in das Fuxebox-Modul einzufügen.

Das Beispiel importiert zunächst "fusebox" und "sparky" aus dem "fuse-box"-Paket und definiert dann eine Klasse Context mit einer Methode getConfig, die ein FuseBox-Konfigurationsobjekt zurückgibt. Es werden folgende Einstellungen konfiguriert: Es zielt auf den Browser ab, es nimmt src/index.ts als Einstiegspunkt und src/index.html als Vorlage für den Webindex. Schließlich wird die Konfiguration des Entwicklungsservers mit den folgenden minimalen Konfigurationsoptionen geliefert: HMR, Caching, Source Maps und Logs sehr schnell.

Der nächste Schritt ist die Definition von Aufgaben mit dem Sparky-Dienstprogramm. Die Aufgabe('Standard') bereinigt das dist-Verzeichnis, ruft die FuseBox-Konfiguration ab und führt den Entwicklungsserver aus. Ähnlich ist die Aufgabe('dist') bereinigt das dist-Verzeichnis, hat aber keine Konfiguration und führt stattdessen den Produktions-Build aus. Das Setup ist sehr hilfreich bei der effizienten Verwaltung von Entwicklung und Produktion durch Automatisierung von Build und Serve.

Erstellen Sie eine einfache HTML-Datei

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FuseBox App</title>
</head>
<body>
  $bundles
</body>
</html>

Die obige HTML-Vorlage richtet eine einfache Seite für ein FuseBox-Projekt ein. Sie enthält Metadaten zur Zeichenkodierung und zum responsiven Design. Der Platzhalter $bundles wird von FuseBox dynamisch durch die richtigen Skript- und Style-Tags ersetzt, um sicherzustellen, dass gebündelte Assets korrekt geladen werden und JavaScript und CSS auf optimierte Weise geladen werden können.

Erstellen Sie eine TypeScript-Datei

document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';

document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';

Diese JavaScript-Codezeile legt den HTML-Inhalt des body-Elements der aktuellen Webseite fest. Sie wird den Inhalt der tag mit einem neuen

überschriftenelement. Der Text in der Überschrift zeigt "Hallo, FuseBox!". Im Wesentlichen handelt es sich um eine sehr einfache Möglichkeit, Inhalte auf einer Webseite mithilfe von JavaScript dynamisch hinzuzufügen oder zu aktualisieren.

TypeScript-Konfiguration

Generieren Sie eine tsconfig.json-Datei, um zusätzliche Konfigurationen für die Einstellungen von TypeScript zu speichern.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Führen Sie den Code aus, sobald er fertig ist. Die Anwendung wird in localhost:4444 gehostet:

Wir können die Seite über den angegebenen Localhost-Port aufrufen. Der Text wird wie im folgenden Screenshot dargestellt.

Einführung in IronPDF: PDF-Erzeuger

Nutzen Sie für die Erstellung, Änderung, Konvertierung und Bearbeitung von PDF-Dokumenten das robuste Node.js-PaketIronPDF. Sie wird bei vielen programmierbasierten Vorgängen im Zusammenhang mit PDFs verwendet, z. B. bei der Konvertierung von HTML in PDF und der Bearbeitung bereits vorhandener PDFs. IronPDF ist ein äußerst nützliches Werkzeug für Programme, die PDFs dynamisch erzeugen und verarbeiten müssen. Sie bietet eine einfache und anpassungsfähige Lösung zur Erstellung hochwertiger PDF-Dokumente.

IronPDF-Paket installieren

Verwenden Sie NPM, um Pakete zu installieren, mit denen Node.js die IronPDF-Fähigkeit aktivieren kann.

npm install @ironsoftware/ironpdf

Fuse-Box-Bündel mit IronPDF

Hier erfahren Sie, wie Sie eine Verbindung zu einem Node.js-Backend herstellen, das IronPDF verwendet, und wie Sie FuseBox für Ihre Front-End-Assets konfigurieren.

Fuse.js-Datei

const { fusebox} = require('fuse-box');
const fuse = fusebox({
  target: 'server',
  entry: 'src/index.ts',
  dependencies: {
    ignoreAllExternal: false,
  },
  watch: true,
  cache: false,
});
fuse.runDev();

const { fusebox} = require('fuse-box');
const fuse = fusebox({
  target: 'server',
  entry: 'src/index.ts',
  dependencies: {
    ignoreAllExternal: false,
  },
  watch: true,
  cache: false,
});
fuse.runDev();

Dieses Skript richtet eine FuseBox-Instanz ein, um serverseitige Skripte zu gruppieren. Es beginnt mit dem Import der Funktion fusebox aus dem Paket fuse-box und passt dann FuseBox mit bestimmten Einstellungen an. Die Einstellung "Server" zeigt an, dass die Ausgabe für eine Node.js-Umgebung und nicht für einen Webbrowser gedacht ist. Der Eintrag "src/index.ts" verweist auf die primäre TypeScript-Datei, die den Bündelungsprozess einleitet.

Die Abhängigkeiten:{ ignoreAllExternal: false} stellt sicher, dass externe Abhängigkeiten nicht übersehen werden, d. h. sie werden dem Paket bei Bedarf hinzugefügt. Die watch:true-Funktion ermöglicht eine automatische Neuerstellung des Pakets, wenn die Quelldateien aktualisiert werden, was den Entwicklungsprozess unterstützt. Schließlich schaltet cache: false die Zwischenspeicherung aus und garantiert, dass die neuesten Updates immer Teil des Builds sind. Die fuse.runDev() command startet den Entwicklungsserver mit diesen Einstellungen.

Index.ts-Datei

const express = require("express");
const IronPdf = require("@ironsoftware/ironpdf");
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey:
    "",
});
const htmlContent = `
<html>
<head>
    <style>
        body {{ font-family: Arial, sans-serif; }}
        h1 {{ color: navy; }}
        p {{ font-size: 14px; }}
    </style>
</head>
<body>
    <h1>User Details</h1>
    <p><strong>ID:</strong> 1</p>
    <p><strong>Name:</strong> Hendry</p>
</body>
</html>
`;
// Example: Express
// On request, build each file on request and respond with its built contents
const app = express();
app.get("/generate-pdf", async (req, res) => {
  const document = IronPdf.PdfDocument;
  console.log("Requesting:generate-pdf");
  // Generate PDF document
  try {
    let result = await document.fromHtml(htmlContent);
    const pdfBuffer = await result.saveAsBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.send(pdfBuffer);
  } catch (error) {
    console.error("PDF generation error:", error);
    res.status(500).send("PDF generation error");
  }
});
const PORT = process.env.PORT 
 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

const express = require("express");
const IronPdf = require("@ironsoftware/ironpdf");
var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey:
    "",
});
const htmlContent = `
<html>
<head>
    <style>
        body {{ font-family: Arial, sans-serif; }}
        h1 {{ color: navy; }}
        p {{ font-size: 14px; }}
    </style>
</head>
<body>
    <h1>User Details</h1>
    <p><strong>ID:</strong> 1</p>
    <p><strong>Name:</strong> Hendry</p>
</body>
</html>
`;
// Example: Express
// On request, build each file on request and respond with its built contents
const app = express();
app.get("/generate-pdf", async (req, res) => {
  const document = IronPdf.PdfDocument;
  console.log("Requesting:generate-pdf");
  // Generate PDF document
  try {
    let result = await document.fromHtml(htmlContent);
    const pdfBuffer = await result.saveAsBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.send(pdfBuffer);
  } catch (error) {
    console.error("PDF generation error:", error);
    res.status(500).send("PDF generation error");
  }
});
const PORT = process.env.PORT 
 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Dieses Skript richtet einen Node.js-Server ein, der das Express-Framework nutzt, um PDFs mit der IronPDF-Bibliothek zu erzeugen. Sie umfasst zunächst die erforderlichen Module: Express für den Betrieb des Servers und @ironsoftware/ironPdf für die Bearbeitung von PDF-Aufgaben. Sie richtet IronPDF mit einem Lizenzschlüssel ein, der für die Erstellung von PDFs unerlässlich ist. Der HTML-Code für die PDF-Datei wird als String deklariert und enthält grundlegende Gestaltungselemente und Details für den Benutzer.

Als Nächstes wird eine Express-Anwendung entwickelt, und es wird ein URL-Pfad /generate-pdf eingerichtet. Wenn eine Anfrage für diesen Pfad eingeht, verwendet der Server die PdfDocument-Klasse von IronPDF, um aus dem angegebenen HTML-Inhalt eine PDF-Datei zu erstellen. Diese PDF-Datei wird dann in einem Puffer gespeichert und mit dem richtigen Inhaltstyp an den Kunden zurückgegeben. Sollte bei diesem Vorgang ein Fehler auftreten, antwortet der Server mit einem Statuscode 500 und einer Fehlermeldung. Letztendlich wird der Server so eingestellt, dass er standardmäßig auf einem bestimmten Port, nämlich 3000, lauscht und eine Nachricht aufzeichnet, um den Betriebsstatus des Servers zu bestätigen.

Bündelung des IronPDF-Skripts

Jetzt können wir das Skript zum Bündeln von Sicherungskästen ausführen.

Sie wird die Dateien in einer separaten Datei bündeln/minifizieren. Mit Hilfe der generierten Datei können wir das Skript ausführen.

Oben sind die mit Hilfe der Fuse Box generierten Minified-Dateien zu sehen.

Wir können die minifizierten Dateien als normale Node.js-Dateien ausführen.

Lizenzvergabe

Wir benötigen einen Lizenzschlüssel, damit der Code ohne Wasserzeichen funktioniert. Entwickler können sich anmeldenhier können Sie eine Testlizenz erwerben. Sie müssen keine Kreditkarte vorlegen, um eine zu erhalten. Wenn Sie sich für eine kostenlose Testversion registrieren, müssen Sie nur Ihre E-Mail-Adresse angeben.

Schlussfolgerung

Die Kombination von FuseBox und IronPDF hat einen erheblichen Einfluss auf die Erstellung von starken PDFs auf dem Server und die Paketierung von Assets auf dem Frontend. FuseBox erleichtert die Erstellung und den Start von Webanwendungen durch die Gruppierung und Verbesserung von Webressourcen. IronPDF ermöglicht die Erstellung von Dokumenten direkt aus HTML-Code und eignet sich gut für die Erstellung von PDFs.

Wenn diese Tools zusammen verwendet werden, funktionieren Online-Anwendungen besser und beschleunigen den Entwicklungsprozess. Dazu müssen sie sicherstellen, dass die Verwaltung von Assets und die Erstellung von PDFs zusammenpassen. Durch die Verwendung von IronPDF zur Erstellung von PDFs und FuseBox zum Verpacken von Dokumenten können Entwickler Anwendungen mit coolen Funktionen erstellen und veröffentlichen, die schneller arbeiten und mehr mit Dokumenten machen können.

Iron Software bietet verschiedene Arten von Bibliotheken, die uns helfen, Anwendungen für verschiedene Umgebungen wie Windows, Android, MAC, Linux usw. zu erstellen,