Un bundle est devenu un outil essentiel dans la boîte à outils de toute application Node.js moderne. Ensembles de logiciels-Webpack, Roll up, Vite manipulent et empaquettent le code et les actifs. Ils fusionnent de nombreux fichiers différents en un ou quelques paquets optimisés, améliorant ainsi les performances en réduisant le nombre de requêtes réseau et en fournissant le code à charger efficacement. En outre, la plupart des offres groupées comportent déjà des options supplémentaires telles que la division du code, le remplacement des modules chauds et l'agitation de l'arbre, qui améliorent l'expérience du développeur et de l'utilisateur final.

Les Bundlers sont des outils essentiels pour des applications évolutives et faciles à maintenir grâce à leur intégration avec les outils de construction et les normes JavaScript modernes, car ils optimisent la fourniture de ressources et facilitent les flux de travail 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 for Node.js.

Introduction

La FuseBox NPM package est l'outil de regroupement le plus rapide, le plus contextuel et le plus avant-gardiste, qui vous permet de gérer et de regrouper les ressources de votre application web moderne en toute simplicité. En ce qui concerne l'efficacité du développeur, le chargeur de modules FuseBox a 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 en direct, fractionnement du code, agitation de l'arbre, etc., ce qui facilite le développement et optimise le résultat final.

FuseBox prend en charge de nombreux types de fichiers : JavaScript, TypeScript, CSS et images. Le chargeur de modules FuseBox s'intègre parfaitement aux frameworks et bibliothèques les plus courants. En outre, FuseBox dispose d'un système de plugins intégré qui permet d'étendre et de personnaliser FuseBox en fonction des besoins de votre projet. Équilibrant performance et facilité d'utilisation, FuseBox accélérera considérablement votre flux de travail de développement et sera optimisé pour la production. FuseBox pousse les choses encore plus loin.

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install fuse-box typescript --save-dev

Créer un fichier FuseBox Config

Créez un fichier fuse.js pour configurer 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();
});

'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private fusebox, sparky } = require( 'fuse-box');
Friend Class Context
'node fuse dist
  Private Function getConfig() As Private
	Return fusebox({ target: 'browser', entry: 'src/index.ts', webIndex: { template: 'src/index.html'}, devServer: True, hmr: True, cache: True, logging: { level: 'succinct'}, sourceMap: True});
  End Function
End Class
'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private task, exec, rm } = sparky(Context)
task( 'default', async(ctx) =>
If True Then
	rm( 'dist');
	const fuse = ctx.getConfig()
	Await fuse.runDev()
End If
)
task( 'dist', async(ctx) =>
If True Then
	rm( 'dist');
	const fuse = ctx.getConfig()
	Await fuse.runProd()
End If
)

Cet exemple simple est la configuration et l'utilisation de FuseBox pour effectuer des tâches de regroupement et de développement dans un environnement Node.js. Les fonctionnalités des plugins de FuseBox nous permettent d'ajouter plusieurs plugins dans le module Fuxebox.

L'exemple commence par importer "fusebox" et "sparky" du 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 s'accompagne des options de configuration minimales suivantes : HMR, mise en cache, cartes de source et journaux très rapidement.

La prochaine étape consistera à définir des tâches à l'aide de l'utilitaire sparky. La tâche(par défaut) nettoie le répertoire dist, obtient la configuration de FuseBox et exécute 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 à la place la version de production. L'installation est très utile pour gérer efficacement le développement et la production en automatisant la construction et le service.

Créer un simple fichier 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>

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<!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 met en place une page simple pour un projet FuseBox. Elle inclut le codage des caractères et les métadonnées de responsive design. Le caractère générique $bundles est remplacé dynamiquement par FuseBox avec les balises de script et de style correctes pour s'assurer que les éléments groupés sont correctement chargés, permettant au JavaScript et au CSS de se charger de manière optimisée.

Créer un fichier TypeScript

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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 du

élément d'en-tête. Le texte de l'en-tête affiche "Hello, FuseBox!". Il s'agit essentiellement d'un moyen très simple d'ajouter ou de mettre à jour du contenu de manière dynamique sur une page web à l'aide de JavaScript.

Configuration TypeScript

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

{
  "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/**/*"]
}

If True Then
  "compilerOptions":
  If True Then
	"target": "es5", "module": "commonjs", "strict": True, "esModuleInterop": True, "skipLibCheck": True, "forceConsistentCasingInFileNames": True
  End If
 , "include": ("src/**/*")
End If

Une fois la traduction terminée, exécutez le code. L'application est hébergée dans localhost:4444 :

Nous pouvons visualiser la page à partir du port localhost donné. Elle devra ressembler à 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 robuste package Node.jsIronPDF. Il est utilisé dans de nombreuses opérations de programmation liées aux PDF, telles que la conversion de HTML en PDF et l'édition de PDF préexistants. IronPDF est un outil très utile pour les programmes qui doivent générer et traiter des PDF de manière dynamique. Il s'agit d'une solution simple et adaptable pour créer des documents PDF de haute qualité.

Installer le package IronPDF

Utilisez NPM pour installer les paquets qui permettent à Node.js d'activer la capacité IronPDF.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @ironsoftware/ironpdf

Offre groupée avec IronPDF

Voici comment vous connecter à un backend Node.js qui utilise IronPDF et configurer FuseBox pour vos actifs frontaux.

Fichier Fuse.js

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();

'INSTANT VB TODO TASK: The following line could not be converted:
const
If True Then
	fusebox} = require( 'fuse-box');
const fuse = fusebox({ target: 'server', entry: 'src/index.ts', dependencies: { ignoreAllExternal: False}, watch: True, cache: False});
fuse.runDev()

Ce script établit une instance FuseBox pour regrouper les scripts côté serveur. Il commence par importer la fonction fusebox du paquetage fuse-box, puis adapte FuseBox à des paramètres particuliers. Le paramètre "serveur" indique que la traduction est destinée à un environnement Node.js, et non à un navigateur web. L'entrée : "src/index.ts" pointe vers le fichier TypeScript principal pour lancer la procédure de regroupement.

Les dépendances :{ ignoreAllExternal : false} la traduction garantit que les dépendances externes ne sont pas négligées, ce qui signifie qu'elles sont ajoutées au paquet si nécessaire. La fonction watch : true permet de reconstruire automatiquement le bundle lorsque les fichiers sources sont mis à jour, ce qui facilite le processus de développement. Enfin, cache : false désactive la mise en cache, garantissant ainsi que les mises à jour les plus récentes font toujours partie de la compilation. L'outil fuse.runDev() la commande lance le serveur de développement avec les paramètres suivants.

Fichier Index.ts

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

const express = require("express")
const IronPdf = require("@ironsoftware/ironpdf")
Dim config = IronPdf.IronPdfGlobalConfig
config.setConfig({ licenseKey:= ""})
const htmlContent = ` (Of html) (Of head) (Of style) body
If True Then
	If True Then
		font-family: Arial, sans-serif
	End If
End If
		h1
		If True Then
			If True Then
				color:
				navy
			End If
		End If
		p
		If True Then
			If True Then
				font-size: 14px
			End If
		End If
	</style> </head> (Of body) (Of h1) User Details</h1> (Of p)(Of strong) ID:</strong> 1</p> (Of p)(Of 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 Sub(req, res)
	const document = IronPdf.PdfDocument
	console.log("Requesting:generate-pdf")
	Try
		Dim result As let = Await document.fromHtml(htmlContent)
		const pdfBuffer = Await result.saveAsBuffer()
		res.setHeader("Content-Type", "application/pdf")
		res.send(pdfBuffer)
	Catch e1 As [error]
		console.error("PDF generation error:", [error])
		res.status(500).send("PDF generation error")
	End Try
End Sub)
const PORT = process.env.PORT 3000
app.listen(PORT, Sub()
	console.log(`Server running on port ${PORT}`)
End Sub)

Ce script établit un serveur Node.js utilisant le framework Express pour générer des PDF avec la bibliothèque IronPDF. Dans un premier temps, elle comprend les modules nécessaires : Express pour les opérations du serveur et IronPDF pour la gestion des tâches PDF. Elle configure IronPDF avec une clé de licence, ce qui est essentiel pour créer des PDF. Le code HTML du PDF est déclaré comme une chaîne de caractères, incorporant un style fondamental et des détails pour l'utilisateur.

Ensuite, une application Express est développée et un chemin URL /generate-pdf est établi. Chaque fois qu'une requête est reçue pour ce chemin, le serveur emploie la classe PdfDocument d'IronPDF pour produire un PDF à partir du contenu HTML donné. Ce PDF est ensuite stocké dans une mémoire tampon et renvoyé au client avec le bon type de contenu. Si une erreur survient au cours de cette procédure, le serveur répondra par un code d'état 500 et un message d'erreur. Enfin, le serveur est configuré pour écouter sur un port désigné par défaut, 3000, et enregistre un message confirmant l'état opérationnel du serveur.

Regroupement du script IronPDF

Nous pouvons maintenant exécuter le script de regroupement des boîtes à fusibles.

Il regroupera/minifiera les fichiers dans un fichier distinct. À l'aide du fichier généré, nous pouvons exécuter le script.

Ci-dessus, les fichiers minifiés générés à l'aide de la boîte à fusibles.

Nous pouvons exécuter les fichiers minifiés comme des fichiers Node.js normaux.

Licences

Nous avons besoin d'une clé de licence pour que le code fonctionne sans filigrane. Les développeurs peuvent s'inscrireici pour obtenir une licence d'essai. Il n'est pas nécessaire de fournir une carte de crédit pour obtenir une traduction. Lorsque vous vous inscrivez pour un essai gratuit, il vous suffit d'indiquer votre adresse électronique.

Conclusion

La combinaison de FuseBox et d'IronPDF a un impact significatif sur la création de PDF solides sur le serveur et sur l'empaquetage des actifs sur le front-end. FuseBox facilite la création et le lancement d'applications web en regroupant et en améliorant les ressources web. En attendant, IronPDF vous permet de créer des documents directement à partir de code HTML et est performant dans la création de PDF.

Utilisés conjointement, ces outils améliorent le fonctionnement des applications en ligne et accélèrent le processus de développement. Pour ce faire, ils veillent à ce que la gestion des actifs et la création de PDF soient compatibles. En utilisant IronPDF pour créer des PDF et FuseBox pour les emballer, les développeurs peuvent créer et publier des applications dotées de fonctionnalités intéressantes, qui fonctionnent plus rapidement et qui permettent d'en faire plus avec les documents.

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