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 fuse box 作為打包器的基準範例，並結合IronPDF Node.js庫進行測試。

FuseBox NPM 套件是速度最快、情境驅動且最具前瞻性的打包工具，讓您可以輕鬆管理和打包現代 Web 應用程式的資源。就開發者效率而言，FuseBox 模組載入器具有簡單的配置功能，可幫助開發者快速設定並開始建立專案。它支援所有所需的功能：即時重載、程式碼分割、搖樹優化等等，使開發變得容易，最終輸出高度優化。

NPM 保險絲盒（開發者使用方法）：圖 1 - 保險絲盒

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 和其他依賴項（例如TypeScript），請安裝它們。

npm install fuse-box typescript --save-dev

npm install fuse-box typescript --save-dev

SHELL

建立 FuseBox 設定檔

建立一個用於配置 FuseBox 的 fuse.js 檔案。

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，其中包含一個方法 getConfig，該方法傳回 FuseBox 配置物件。它配置以下設定：它以瀏覽器為目標，它以 src/index.ts 為入口點，以 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 內容。它將用新的 <h1> 標題元素取代 <body> 標籤內的內容。標題中的文字顯示為"你好，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 保險絲盒（開發者使用方法）：圖 3 - 應用程式輸出

隆重介紹IronPDF：PDF 創建器

若要建立、修改、轉換和編輯 PDF 文檔，請使用功能強大的Node.js套件IronPDF 。它被用於許多與 PDF 相關的基於程式設計的操作，例如將 HTML 轉換為 PDF 和編輯現有的 PDF。 IronPDF對於需要動態產生和處理 PDF 的程式來說是一個非常有用的工具。它提供了一種簡單且適應性強的解決方案，用於創建高品質的 PDF 文件。

NPM保險絲盒（開發者使用方法）：圖4 - IronPDF

安裝IronPDF軟體包

使用 NPM 安裝允許Node.js啟用IronPDF功能的軟體包。

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

帶有鐵質保險絲盒的捆綁包（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 進行配置。 "伺服器"設定表示輸出是面向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 和用於處理 PDF 任務的 @ironsoftware/ironpdf。它會為IronPDF設定許可證密鑰，這對於建立 PDF 文件至關重要。 PDF 的 HTML 程式碼被宣告為一個字串，其中包含基本的樣式和使用者所需的詳細資訊。

接下來，開發一個 Express 應用程序，並建立 URL 路徑 /generate-pdf。每當收到對該路徑的請求時，伺服器都會使用 IronPDF 的 PdfDocument 類別從給定的 HTML 內容產生 PDF。然後，該 PDF 檔案會儲存在緩衝區中，並以正確的內容類型傳回給客戶端。如果在此過程中發生錯誤，伺服器將回覆 500 狀態碼和錯誤訊息。最終，伺服器預設為監聽指定的連接埠 3000，並記錄一條訊息以確認伺服器的運作狀態。