import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

NODE 說明

NPM fuse-box（開發者的使用方法）

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

Darrius Serrant

已更新:2026年6月20日

打包已成為任何現代Node.js應用程式工具包中的重要工具。打包工具 — Webpack、Rollup、Vite — 處理和打包程式碼和資產。它們將許多不同的文件合併為一個或少數幾個優化的包，通過減少網路請求的數量並有效地提供程式碼來提高性能。此外，大多數包已經包含諸如程式碼分割、熱模塊替換和樹搖等額外功能，從而提升開發者和最終使用者的體驗。

打包工具是可擴展和可維護應用程式的關鍵推動者，通過與構建工具和現代JavaScript標準的整合，它們優化了資源的交付並簡化了部署工作流程。在本文中，我們將使用NPM fuse box作為具有IronPDF Node.js程式庫的打包工具的基準範例。

FuseBox NPM包是最快、情境驅動、最前瞻的打包工具，使您可以輕鬆管理和捆綁現代Web應用程式的資產。關於開發人員效率，FuseBox模塊載入器具有簡易的配置，幫助開發人員快速設置開始構建其專案。它支持所有所需功能：實時重載、程式碼分割、樹搖等，使開發變得簡單，並最終輸出高度優化。

NPM fuse-box（它對開發者的作用）：圖1 - fuse-box

FuseBox支持多種文件型別：JavaScript、TypeScript、CSS和圖像。 FuseBox模塊載入器很好地整合了流行的框架和程式庫。此外，它具有整合的插件系統，根據您的專案需求進一步擴展和自定義FuseBox。在性能與易用性之間取得平衡，FuseBox將大大加快您的開發工作流程並為生產優化。 FuseBox將其推向了一個全新的水平。

要建立和配置一個FuseBox專案，請按照以下步驟進行：

初始化新的Node.js專案以用於FuseBox

為您的專案建立一個目錄，然後在Node.js中打開它。

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

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

SHELL

安裝fuse-box

安裝fuse-box和其他依賴項，如TypeScript（如果您正在使用）。

npm install fuse-box typescript --save-dev

npm install fuse-box typescript --save-dev

SHELL

建立FuseBox配置文件

建立一個fuse.js文件來配置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();
});

JAVASCRIPT

此簡單範例展示了在Node.js環境中進行打包和開發任務的FuseBox配置和使用。範例首先從'fuse-box'包中導入'fusebox'和'sparky'，然後定義一個包含方法的類Context，該方法返回一個FuseBox配置物件。它配置了以下設置：它目標瀏覽器，將src/index.html作為網頁索引的模板。最後，開發伺服器的配置隨著以下最小配置選項一起到來：HMR、快取、源映射和日誌。

下一步將使用sparky工具定義任務。 task('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>

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

上面的HTML模版為FuseBox專案設置了一個簡單的頁面。它包括字元編碼和響應設計的元資料。佔位符$bundles由FuseBox動態替換為正確的腳本和樣式標籤，以確保捆綁的資產被正確地載入，允許JavaScript和CSS以優化方式載入。

建立TypeScript文件

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

這行JavaScript程式碼設置了當前網頁的body元素的HTML內容。它將用新的<body>標籤內的內容。標題中的文字顯示"Hello, FuseBox!"。本質上，這是在網頁上動態新增或更新內容的非常簡單的方法，使用JavaScript。

TypeScript配置

生成一個tsconfig.json文件來保存TypeScript設置的附加配置。

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

完成後運行程式碼。應用程式託管在localhost:4444：

NPM fuse-box（它對開發者的作用）：圖2 - 主控台輸出

我們可以從給定的本地主機端口查看該頁面。它將像下面的截圖所示。

NPM fuse-box（它對開發者的作用）：圖3 - 應用程式輸出

介紹IronPDF：PDF建立器

使用強大的Node.js程式包IronPDF來建立、修改、轉換和編輯PDF文件。它被應用於與PDF相關的許多基於程式的操作，例如將HTML轉換為PDF和編輯現有PDF。 IronPDF是需要生成和動態處理PDF的程式的非常有用的工具。它提供了建立高品質PDF文件的簡單且靈活的解決方案。

NPM fuse-box（它對開發者的作用）：圖4 - IronPDF

安裝 IronPDF 套件

使用NPM安裝使Node.js能夠啟用IronPDF功能的包。

 npm i @ironsoftware/ironpdf

使用IronPDF的Fuse-Box包

以下是如何連接到使用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,
});

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

JAVASCRIPT

這個腳本建立了一個FuseBox實例來分組伺服器端腳本。它首先從fuse-box包中導入fusebox函式，然後使用特定設置定制FuseBox。 '伺服器'設置表示輸出是為Node.js環境準備，而不是Web瀏覽器。 entry: 'src/index.ts'指向主要的TypeScript文件以啟動打包程式。

dependencies: { ignoreAllExternal: false }確保不忽略外部依賴項，這意味著在需要時將它們新增到包中。 watch: true功能允許每當源文件更新時自動重建包，這對開發過程有幫助。最後，cache: false關閉快取，確保最新的更新始終是構建的一部分。 fuse.runDev()命令以這些設置啟動開發伺服器。

Index.ts文件

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

這個腳本利用Express框架建立一個Node.js伺服器，用於使用IronPDF程式庫生成PDF。最初，它包括必要的模組：用於伺服器操作的Express和@ironsoftware/ironpdf來處理PDF任務。它設置IronPDF與授權金鑰這是建立PDF所必需的。 PDF的HTML被聲明為字串，並包含使用者的基本樣式和細節。

接下來，一個Express應用被開發，並設立一個URL路徑/generate-pdf。每當收到此路徑的請求時，伺服器利用IronPDF的PdfDocument類來從給定的HTML內容生成PDF。然後此PDF儲存在緩衝區中並以正確的內容型別回傳給客戶端。如果在此過程中出現錯誤，伺服器將回覆一個500狀態程式碼和一條錯誤消息。最終，伺服器被設置為在預設端口3000上監聽，並記錄一條消息以確認伺服器的運行狀態。