NODE 說明

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

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

更新:2025年7月28日

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

打包工具透過與建置工具和現代JavaScript標準的整合，優化資源交付並平滑部署工作流程，是可擴展和可維護應用程式的關鍵驅動因素。在本文中，我們將使用NPM FuseBox作為IronPDF Node.js程式庫的打包工具範例。

FuseBox NPM 套件是最快、基於上下文的以及最具前瞻性的打包工具，讓您輕鬆管理和打包現代化網頁應用程式的資產。關於開發者效率，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

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

這個簡單的例子是FuseBox配置和使用，執行捆綁和開發任務在Node.js環境中。該示例首先從 'fuse-box' 套件中導入 'fusebox' 和 'sparky'，然後定義一個類getConfig返回FuseBox配置對象。它配置了以下設置：定位瀏覽器，以src/index.html作為Web索引的模板。最後，開發服務器的配置包括以下最低配置選項：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> 標籤內的內容，並用新的<h1> 標題元素代替。標題中的文本顯示"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創建工具

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

NPM fuse-box (對開發者的運作方式)：圖4 - IronPDF

安裝IronPDF套件

使用NPM安裝套件，使Node.js能夠啟用IronPDF功能。

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

Fuse-Box與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,
});

// 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。 'server'設置表示輸出是針對Node.js環境，而不是網頁瀏覽器。 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端口，並錄製消息以確認服務器的運行狀態。