节点帮助

NPM fuse-box（如何为开发人员工作）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

2024年十月24日

捆绑包已成为任何现代 Node.js 应用程序工具包中的重要工具。打包工具——Webpack、Roll up、Vite——处理和打包代码和资源。这些工具将许多不同的文件合并成一个或几个优化的捆绑包，通过减少网络请求的数量和提供有效加载的代码来提高性能。此外，大多数捆绑包都已包含代码拆分、热模块替换和树形摇动等额外功能，可增加开发人员和最终用户的使用体验。

捆绑程序通过与构建工具和现代 JavaScript 标准的集成，优化了资源交付和顺畅的部署工作流，是可扩展和可维护应用程序的关键推动因素。在本文中，我们将以 NPM 保险丝盒为基准示例，介绍 IronPdf for Node.js 库的捆绑程序。

介绍

The FuseBox NPM 包是最快、以上下文为导向并最具前瞻性的打包器，让您轻松管理和打包现代 Web 应用程序的资源。关于开发人员的效率，FuseBox 模块加载器的配置非常简单，可以帮助开发人员快速设置，开始构建项目。它支持所有所需的功能：实时重载、代码拆分、树状晃动等，使开发变得简单，最终输出得到高度优化。

NPM fuse-box（它如何为开发者工作）：图 1 - fuse-box

FuseBox 支持多种文件类型：JavaScript、TypeScript、CSS 和图像。 FuseBox 模块加载器可与流行的框架和库很好地集成。此外，它还具有一个集成插件系统，可根据您的项目需求进一步扩展和定制 FuseBox。 FuseBox 兼顾了性能和易用性，将大大加快您的开发工作流程，并针对生产进行了优化捆绑。 FuseBox 将其推向了一个全新的高度。

要创建和配置 FuseBox 项目，请按照以下步骤操作：

为 FuseBox 初始化一个新的 Node.js 项目

为您的项目创建一个目录，然后在 Node.js 中打开它。

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

安装保险丝盒

如果您正在使用，请安装 fuse-box 和其他依赖项（如 TypeScript）。

npm install fuse-box typescript --save-dev

创建 FuseBox 配置文件

创建用于配置 FuseBox 的 fuse.js 文件。

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

JAVASCRIPT

这个简单的例子是 FuseBox 的配置和使用，用于在 Node.js 环境中执行捆绑和开发任务。 FuseBox 插件功能允许我们在 Fuxebox 模块中添加多个插件。

该示例首先从 "fuse-box "包中导入了 "fusebox "和 "sparky"，然后定义了一个带有 getConfig 方法的 Context 类，该方法会返回一个 FuseBox 配置对象。它配置了以下设置：以浏览器为目标，将 src/index.ts 作为入口点，将 src/index.html 作为网页索引模板。最后，开发服务器的配置包括以下最低配置选项：HMR、缓存、源映射和日志很快就能完成。

下一步将使用 sparky 工具定义任务。任务 ('default') 清理 dist 目录，获取 FuseBox 配置并运行开发服务器。同样，task('dist') 清理 dist 目录，但没有任何配置，而是运行生产构建。通过自动构建和服务，该设置对高效管理开发和生产非常有帮助。

创建一个简单的 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>

上述 HTML 模板为 FuseBox 项目设置了一个简单的页面。其中包括字符编码和响应式设计元数据。 FuseBox 会用正确的脚本和样式标签动态替换占位符 $bundles，以确保正确加载捆绑的资产，让 JavaScript 和 CSS 以优化的方式加载。

创建 TypeScript 文件

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

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

JAVASCRIPT

这行 JavaScript 代码设置了当前网页 body 元素的 HTML 内容。它将用新的

标题元素替换标签内的内容。标题中的文本显示为“Hello, FuseBox!”。从本质上讲，这是一种使用 JavaScript 在网页上动态添加或更新内容的非常简单的方法。

TypeScript 配置

生成一个 tsconfig.json 文件，用于保存 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/**/*"]
}

JAVASCRIPT

完成后运行代码。它将应用程序托管在 localhost:4444：

NPM fuse-box（开发者如何使用）：图 2 - 控制台输出

我们可以从给定的 localhost 端口查看页面。译文将如下截图所示。

NPM fuse-box（开发者如何使用）：图 3 - 应用输出

介绍 IronPDF：PDF 创建工具

如需创建、修改、转换和编辑PDF文档，请使用强大的Node.js包IronPDF。在许多与 PDF 相关的基于编程的操作中都会用到它，例如将 HTML 转换为 PDF 和编辑已有的 PDF。对于需要动态生成和处理 PDF 的程序来说，IronPDF 是一个非常有用的工具。它为创建高质量的 PDF 文档提供了一个简单且适应性强的解决方案。

NPM fuse-box（开发者的工作原理）：图 4 - IronPDF

安装IronPDF软件包

使用 NPM 安装允许 Node.js 启用 IronPDF 功能的软件包。

npm install @ironsoftware/ironpdf

Fuse-Box Bundle With IronPDF

以下是如何连接到使用 IronPDF 的 Node.js 后端，并为您的前端资产配置 FuseBox。

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

JAVASCRIPT

该脚本建立了一个 FuseBox 实例来分组服务器端脚本。它首先从 fuse-box 软件包中导入 fusebox 函数，然后根据特定设置定制 FuseBox。服务器 "设置表示输出结果适用于 Node.js 环境，而非网络浏览器。条目："src/index.ts "指向启动捆绑程序的主要 TypeScript 文件。

依赖项：{ ignoreAllExternal: false } 确保不会忽略外部依赖项，这意味着如果需要，它们将被添加到包中。 watch: true 功能允许在源文件更新时自动重建捆绑包，这有助于开发过程。最后，缓存：false 关闭缓存，确保最新更新始终是构建的一部分。 fuse.runDev() 命令使用这些设置启动开发服务器。

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

JAVASCRIPT

该脚本利用 Express 框架建立一个 Node.js 服务器，使用 IronPDF 库生成 PDF。最初，它包括必要的模块：Express 用于服务器的操作，@ironsoftware/ironpdf 用于处理 PDF 任务。它通过许可证密钥设置 IronPdf，这对于创建 PDF 至关重要。 PDF 的 HTML 以字符串的形式声明，为用户提供了基本的样式和细节。

接下来，开发一个 Express 应用程序，并建立 URL 路径 /generate-pdf。每当收到该路径的请求时，服务器就会采用 IronPDF 的 PdfDocument 类从给定的 HTML 内容中生成 PDF。然后将 PDF 保存在缓冲区中，并以正确的内容类型返回给客户。如果在此过程中出现错误，服务器将回复 500 状态代码和错误信息。最终，服务器默认设置为监听指定端口 3000，并记录一条信息以确认服务器的运行状态。