Un bundle se ha convertido en una herramienta fundamental en el conjunto de herramientas de cualquier aplicación Node.js moderna. Bundlers-Webpack, Roll up, Vite-manejan y empaquetan código y activos. Fusionan muchos archivos diferentes en uno o unos pocos paquetes optimizados, lo que mejora el rendimiento al reducir el número de solicitudes de red y proporcionar el código que se debe cargar de forma eficaz. Además, la mayoría de los paquetes ya cuentan con extras como la división de código, el reemplazo de módulos en caliente y la agitación de árboles que aumentan la experiencia como desarrollador y usuario final.

Los bundlers son facilitadores críticos de aplicaciones escalables y mantenibles gracias a su integración con herramientas de compilación y estándares modernos de JavaScript, ya que optimizan la entrega de recursos y agilizan los flujos de trabajo de despliegue. En este artículo, utilizaremos la caja de fusibles NPM como ejemplo de referencia de un bundler con la biblioteca IronPDF for Node.js.

Introducción

FuseBox NPM package es el empaquetador más rápido, orientado al contexto y con mayor visión de futuro, que le permite gestionar y empaquetar los activos de su aplicación web moderna con facilidad. En cuanto a la eficiencia del desarrollador, el cargador de módulos FuseBox tiene una configuración sencilla que ayuda al desarrollador a configurar las cosas rápidamente para empezar a construir su proyecto. Es compatible con todas las funciones deseadas: recarga en vivo, división de código, agitación de árbol, etc., lo que facilita el desarrollo y optimiza al máximo el resultado final.

FuseBox admite muchos tipos de archivos: JavaScript, TypeScript, CSS e imágenes. El cargador de módulos FuseBox se integra perfectamente con los frameworks y bibliotecas más populares. Además, cuenta con un sistema de plugins integrado que ampliará y personalizará aún más FuseBox según las necesidades de tu proyecto. Al equilibrar el rendimiento con la facilidad de uso, FuseBox acelerará significativamente su flujo de trabajo de desarrollo y el paquete optimizado para la producción. FuseBox lo lleva a otro nivel.

Para crear y configurar un proyecto FuseBox, sigue estos pasos:

Inicializar un nuevo proyecto Node.js para FuseBox

Crea un directorio para tu proyecto y ábrelo en 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

Para instalar fuse-box

Instala fuse-box y otras dependencias como TypeScript si lo utilizas.

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

Crear archivo FuseBox Config

Crear un archivo fuse.js para configurar 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
)

Este sencillo ejemplo es la configuración y el uso de FuseBox para realizar tareas de agrupación y desarrollo en un entorno Node.js. Las características de los plugins de FuseBox nos permiten añadir múltiples plugins en el módulo Fuxebox.

El ejemplo primero importa 'fusebox' y 'sparky' del paquete 'fuse-box', luego define una clase Context con un método getConfig que devuelve un objeto de configuración FuseBox. Configura los siguientes ajustes: se dirige al navegador, toma src/index.ts como punto de entrada y src/index.html como plantilla para el índice web. Por último, la configuración del servidor de desarrollo viene acompañada de las siguientes opciones de configuración mínimas: HMR, almacenamiento en caché, mapas de origen y registros muy rápidamente.

El siguiente paso consistirá en definir tareas utilizando la utilidad sparky. La tarea(por defecto) limpia el directorio dist, obtiene la configuración de FuseBox y ejecuta el servidor de desarrollo. Del mismo modo, la tarea(dist) limpia el directorio dist pero no tiene ninguna configuración y, en su lugar, ejecuta la compilación de producción. La configuración es bastante útil para gestionar el desarrollo y la producción de forma eficiente mediante la automatización de la compilación y el servicio.

Crear un archivo HTML sencillo

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

La plantilla HTML anterior crea una página sencilla para un proyecto de FuseBox. Incluye codificación de caracteres y metadatos de diseño adaptable. El marcador de posición, $bundles, es sustituido dinámicamente por FuseBox con las etiquetas de script y estilo correctas para garantizar que los activos agrupados se cargan correctamente, permitiendo que JavaScript y CSS se carguen de forma optimizada.

Crear un archivo 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>';

Esta línea de código JavaScript establece el contenido HTML del elemento body de la página web actual. Sustituirá el contenido del

elemento de encabezamiento. El texto del encabezado muestra "Hola, FuseBox!". En esencia, se trata de una forma muy sencilla de añadir o actualizar contenido dinámicamente en una página web mediante JavaScript.

Configuración de TypeScript

Generar un archivo tsconfig.json para mantener la configuración adicional de los ajustes 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

Una vez hecho esto, ejecute el código. Aloja la aplicación en localhost:4444:

Podemos ver la página desde el puerto localhost indicado. Se mostrará como en la siguiente captura de pantalla.

Presentación de IronPDF: Creador de PDF

Para la creación, modificación, conversión y edición de documentos PDF, utilice el robusto paquete Node.jsIronPDF. Se utiliza en muchas operaciones basadas en programación relacionadas con PDF, como la conversión de HTML a PDF y la edición de PDF preexistentes. IronPDF es una herramienta muy útil para programas que necesitan generar y procesar PDF de forma dinámica. Ofrece una solución sencilla y adaptable para crear documentos PDF de alta calidad.

Instalar el paquete de IronPDF

Utilice NPM para instalar paquetes que permitan a Node.js activar la función IronPDF.

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

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

Paquete Fuse-Box con IronPDF

A continuación se explica cómo conectarse a un backend Node.js que utiliza IronPDF y configurar FuseBox para sus activos front-end.

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

Este script establece una instancia de FuseBox para agrupar scripts del lado del servidor. Comienza importando la función fusebox del paquete fuse-box y luego adapta FuseBox con configuraciones particulares. La opción "servidor" indica que el resultado está pensado para un entorno Node.js, no para un navegador web. La entrada: 'src/index.ts' apunta al archivo TypeScript principal para iniciar el procedimiento de agrupación.

Las dependencias:{ ignorarTodoExterno: false} garantiza que no se pasen por alto las dependencias externas, lo que significa que se añaden al paquete si es necesario. La función watch: true permite la reconstrucción automática del paquete cada vez que se actualizan los archivos fuente, lo que ayuda en el proceso de desarrollo. Por último, cache: false desactiva el almacenamiento en caché, garantizando que las actualizaciones más recientes siempre formen parte de la compilación. El fuse.runDev() command inicia el servidor de desarrollo con esta configuración.

Archivo 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)

Este script establece un servidor Node.js que utiliza el marco Express para generar archivos PDF con la biblioteca IronPDF. Inicialmente, incluye los módulos necesarios: Express para las operaciones del servidor y @ironsoftware/ironpdf para gestionar las tareas de PDF. Configura IronPDF con una clave de licencia, que es esencial para crear archivos PDF. El HTML para el PDF se declara como una cadena, incorporando un estilo fundamental y detalles para el usuario.

A continuación, se desarrolla una aplicación Express y se establece una ruta URL /generate-pdf. Siempre que se recibe una solicitud para esta ruta, el servidor emplea la clase PdfDocument de IronPDF para producir un PDF a partir del contenido HTML dado. Este PDF se almacena en un búfer y se devuelve al cliente con el tipo de contenido correcto. Si se produce un error durante este procedimiento, el servidor responderá con un código de estado 500 y un mensaje de error. Por último, el servidor se configura para escuchar en un puerto designado por defecto, 3000, y registra un mensaje para confirmar el estado operativo del servidor.

Integración del script IronPDF

Ahora podemos ejecutar el script de agrupación de cajas de fusibles.

Agrupará/minificará los archivos en un archivo independiente. Con la ayuda del archivo generado, podremos ejecutar el script.

Arriba están los archivos minificados generados con la ayuda de la caja de fusibles.

Podemos ejecutar los archivos minificados como archivos Node.js normales.

Licencias

Necesitamos una clave de licencia para que el código funcione sin marca de agua. Los desarrolladores pueden inscribirseaquí para obtener una licencia de prueba. No es necesario proporcionar una tarjeta de crédito para obtenerla. Cuando te registres para una prueba gratuita, solo tienes que introducir tu dirección de correo electrónico.

Conclusión

La combinación de FuseBox e IronPDF tiene un impacto significativo en la creación de PDF sólidos en el servidor y el empaquetado de activos en el front-end. FuseBox facilita la creación y el lanzamiento de aplicaciones web agrupando y mejorando los recursos web. Por su parte, IronPDF permite crear documentos directamente a partir de código HTML y es bueno para crear PDF.

Cuando se utilizan juntas, estas herramientas hacen que las aplicaciones en línea funcionen mejor y aceleran el proceso de desarrollo. Para ello, se aseguran de que la gestión de activos y la creación de PDF funcionen conjuntamente. Al utilizar IronPDF para crear archivos PDF y FuseBox para empaquetarlos, los desarrolladores pueden crear y publicar aplicaciones con funciones interesantes, trabajar más rápido y hacer más cosas con los documentos.

Iron Software ofrece varios tipos de bibliotecas que nos ayudan a crear aplicaciones fácilmente para diversos entornos como Windows, Android, MAC Linux, etc,