信息圖標
跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 說明
  4. NPM fuse-box
NODE 說明

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

Darrius Serrant
Darrius Serrant
更新日期:

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

綁定器通過與構建工具和現代JavaScript標準的集成，成為可擴展和可維護應用程式的關鍵促成者，因為它們優化了資源交付並簡化了部署工作流。 在本文中，我們將使用NPM熔盒作為使用IronPDF Node.js庫的綁定器的基準示例。

FuseBox NPM包是最快速、上下文驅動和最具前瞻性的綁定器，讓您輕鬆管理和打包現代網頁應用程式的資產。 關於開發者效率，FuseBox模塊加載器具有簡易配置，能幫助開發者快速設置並開始構建項目。 它支持所有所需功能：實時重新加載、代碼拆分、樹搖晃等，讓開發變得簡單，最終輸出高度優化。

NPM熔盒（對開發者的工作原理）：圖1 - 熔盒

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

這個簡單的例子是FuseBox在Node.js環境中執行打包和開發任務的配置和用法。 該例首先從'fuse-box'包中導入'fusebox'和'sparky'，然後定義一個類Context，其方法getConfig返回FuseBox配置對象。 它配置了以下設置：目標是瀏覽器，將src/index.ts作為入口點，並將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代碼設置了當前網頁的元素的HTML內容。 它將用一個新的<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熔盒（對開發者的工作原理）：圖2 - 控制台輸出

我們可以從給定的localhost端口查看頁面。 它將像下面的截圖一樣顯示。

NPM熔盒（對開發者的工作原理）：圖3 - 應用輸出

介紹IronPDF：PDF創建者

使用強大的Node.js包IronPDF來創建、修改、轉換和編輯PDF文件。 它被用於許多與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環境而不是網頁瀏覽器。 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上偵聽，並記錄一條消息以確認服務器的運行狀態。

包裝IronPDF腳本

現在我們可以運行熔盒的包裝腳本。

NPM熔盒（對開發者的工作原理）：圖5 - 熔盒模塊加載器

它將打包/壓縮文件到一個單獨的文件。使用生成的文件，我們可以運行腳本。

NPM熔盒（對開發者的工作原理）：圖6 - 輸出包

以上是用熔盒生成的壓縮文件。

NPM熔盒（對開發者的工作原理）：圖7 - PDF控制台輸出

我們可以作為普通Node.js文件運行壓縮文件。

NPM熔盒（對開發者的工作原理）：圖8 - PDF輸出

許可證

我們需要一個許可證密鑰讓代碼工作而不會有水印。 開發者可以在這裡註冊獲取試用許可證。 您不需要提供信用卡即可獲得一個。 當您註冊免費試用版時，只需輸入您的電子郵件地址。

結論

FuseBox和IronPDF的組合在服務器上生成強力PDF和在前端打包資產方面產生了重大影響。 FuseBox通過組合和改善網頁資源來簡化網頁應用程式的構建和發布。 同時，IronPDF允許您直接從HTML代碼創建文檔，並在創建PDF方面也很出色。

當這些工具一起使用時，使得在線應用程式工作得更好，並加快開發過程。 它們通過確保資產管理和PDF創建共同工作來做到這一點。 通過使用IronPDF生成PDF，使用FuseBox打包資產，開發者可以構建和推出具有酷炫功能、工作更快且文件功能更多的應用程式。

Iron Software提供各類型的庫，幫助我們輕鬆為各種環境（如Windows，Android，MAC，Linux等）構建應用程序。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用