Un bundle est devenu un outil essentiel dans la boîte à outils de toute application Node.js moderne. Les bundlers — Webpack, Rollup, Vite — gèrent et empaquètent le code et les actifs. Ils fusionnent de nombreux fichiers différents en un ou quelques bundles optimisés, améliorant les performances en réduisant le nombre de requêtes réseau et en fournissant le code à charger efficacement. De plus, la plupart des bundles disposent déjà de compléments comme le code splitting, le remplacement à chaud de module et l'agitation d'arbre qui augmentent l'expérience en tant que développeur et utilisateur final.

Les bundlers sont des facilitateurs critiques d'applications évolutives et maintenables grâce à leur intégration avec les outils de compilation et les standards JavaScript modernes, car ils optimisent la livraison des ressources et fluidifient les workflows de déploiement. Dans cet article, nous utiliserons la boîte à fusibles NPM comme exemple de référence d'un bundler avec la bibliothèque IronPDF Node.js.

Le paquetage NPM FuseBox est le bundler le plus rapide, basé sur le contexte, et le plus avant-gardiste, vous permettant de gérer et de regrouper les actifs de votre application web moderne avec facilité. En ce qui concerne l'efficacité du développeur, le chargeur de module FuseBox dispose d'une configuration facile qui aide le développeur à mettre les choses en place rapidement pour commencer à construire son projet. Il prend en charge toutes les fonctionnalités souhaitées : rechargement à chaud, séparation de code, agitation d'arbre, etc., rendant le développement facile et le résultat final hautement optimisé.

FuseBox prend en charge de nombreux types de fichiers : JavaScript, TypeScript, CSS, et images. Le chargeur de module FuseBox s'intègre parfaitement avec les frameworks et bibliothèques populaires. De plus, il dispose d'un système de plugins intégré qui permettra d'étendre et de personnaliser encore FuseBox en fonction des besoins de votre projet. En équilibrant performance et facilité d'utilisation, FuseBox accélérera considérablement votre workflow de développement et regroupera de manière optimisée pour la production. FuseBox le porte à un niveau complètement nouveau.

Pour créer et configurer un projet FuseBox, suivez ces étapes :

Initialiser un Nouveau Projet Node.js pour FuseBox

Créez un répertoire pour votre projet, puis ouvrez-le dans Node.js.

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

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

Pour Installer fuse-box

Installez fuse-box et d'autres dépendances comme TypeScript si vous l'utilisez.

npm install fuse-box typescript --save-dev

npm install fuse-box typescript --save-dev

Créer un fichier de Configuration FuseBox

Créez un fichier fuse.js pour configurer FuseBox.

const { fusebox, sparky } = require('fuse-box');

class Context {
  // Method to return the FuseBox configuration
  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);

// Define development task
task('default', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runDev();
});

// Define production build task
task('dist', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runProd();
});

const { fusebox, sparky } = require('fuse-box');

class Context {
  // Method to return the FuseBox configuration
  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);

// Define development task
task('default', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runDev();
});

// Define production build task
task('dist', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runProd();
});

Cet exemple simple est la configuration et l'utilisation de FuseBox pour effectuer des tâches de bundling et de développement dans un environnement Node.js. L'exemple commence par importer 'fusebox' et 'sparky' depuis le paquet 'fuse-box', puis définit une classe Context avec une méthode getConfig qui renvoie un objet de configuration FuseBox. Il configure les paramètres suivants : il cible le navigateur, il prend src/index.ts comme point d'entrée et src/index.html comme modèle pour l'index web. Enfin, la configuration du serveur de développement vient avec les options de configuration minimales suivantes : HMR, mise en cache, cartes sources et journaux très rapidement.

L'étape suivante sera de définir des tâches en utilisant l'utilitaire sparky. La tâche('default') nettoie le répertoire dist, obtient la configuration FuseBox, et lance le serveur de développement. De même, la tâche('dist') nettoie le répertoire dist mais n'a aucune configuration et exécute plutôt la construction de production. La configuration est très utile pour gérer le développement et la production efficacement en automatisant la construction et le service.

Créer un fichier HTML simple

<!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>

<!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>

Le modèle HTML ci-dessus configure une page simple pour un projet FuseBox. Il inclut le codage des caractères et des métadonnées de conception réactive. Le placeholder, $bundles, est remplacé dynamiquement par FuseBox avec les balises de script et de style correctes pour s'assurer que les actifs regroupés sont correctement chargés, permettant au JavaScript et au CSS de se charger de manière optimisée.

Créer un fichier TypeScript

// Set the HTML content of the body element
document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';

Cette ligne de code JavaScript définit le contenu HTML de l'élément body de la page web actuelle. Elle remplacera le contenu à l'intérieur de la balise <body> par un nouvel élément d'en-tête

. Le texte dans l'en-tête affiche "Hello, FuseBox!". En essence, c'est un moyen très simple d'ajouter ou de mettre à jour dynamiquement du contenu sur une page web en utilisant JavaScript.

Configuration TypeScript

Générez un fichier tsconfig.json pour contenir la configuration supplémentaire des paramètres de TypeScript.

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

Une fois terminé, exécutez le code. Il héberge l'application sur localhost:4444 :

Nous pouvons voir la page à partir du port localhost donné. Cela s'affichera comme la capture d'écran ci-dessous.

Présentation d'IronPDF : Créateur de PDF

Pour la création, la modification, la conversion, et l'édition de documents PDF, utilisez le package robuste Node.js IronPDF. Il est utilisé dans de nombreuses opérations basées sur la programmation liées aux PDF, telles que la conversion de HTML en PDF et l'édition de PDFs existants. IronPDF est un outil extrêmement utile pour les programmes qui doivent générer et traiter dynamiquement des PDFs. Il offre une solution simple et adaptable pour créer des documents PDF de haute qualité.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

const { fusebox } = require('fuse-box');

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

// Run the development server
fuse.runDev();

const { fusebox } = require('fuse-box');

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

// Run the development server
fuse.runDev();

const express = require("express");
const IronPdf = require("@ironsoftware/ironpdf");

var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey: "", // Add your license key here
});

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>
`;

// Express setup for handling requests
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}`);
});

Conclusion

La combinaison de FuseBox et d'IronPDF a un impact significatif sur la production de PDF robustes sur le serveur et l'emballage des ressources sur le front end. FuseBox facilite la construction et le lancement d'applications web en regroupant et en améliorant les ressources web. Pendant ce temps, IronPDF vous permet de créer des documents directement à partir de code HTML et est efficace dans la création de PDFs.

Lorsqu'ils sont utilisés ensemble, ces outils améliorent le fonctionnement des applications en ligne et accélèrent le processus de développement. Ils le font en assurant une gestion des ressources et une création de PDFs conjointes. En utilisant IronPDF pour créer des PDFs et FuseBox pour empaqueter les choses, les développeurs peuvent construire et publier des applications qui ont des fonctionnalités cool, qui fonctionnent plus rapidement, et qui peuvent faire plus de choses avec les documents.

Iron Software offre divers types de bibliothèques qui nous aident à construire des applications facilement pour divers environnements tels que Windows, Android, MAC, Linux, etc.