節點幫助

NPM fuse-box（如何為開發者工作）

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

Darrius Serrant

2024年10月24日

在任何現代化的 Node.js 應用程式中，捆綁包已成為不可或缺的工具。 Bundlers—Webpack、Roll up、Vite—處理和打包代碼和資產。他們將許多不同的文件合併成一個或幾個優化包，通過減少網路請求數量來提高效能，並有效提供需要載入的代碼。此外，大多數套件已經包含額外功能，如代碼分割、熱模塊替換和樹搖減肥，這些功能提升了作為開發者和最終用戶的體驗。

Bundlers 是透過與建置工具和現代 JavaScript 標準的整合來優化資源傳遞和簡化部署工作流程，因此在可擴展和可維護應用程式中扮演關鍵作用。在本文中，我們將使用 NPM fuse box 作為範例來對比 IronPDF for Node.js 庫的打包器效果。

介紹

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

安裝 fuse-box

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

npm install fuse-box typescript --save-dev

建立 FuseBox 配置文件

創建一個 fuse.js 文件以配置 FuseBox。

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

js

JAVASCRIPT

此簡單範例是 FuseBox 的配置和使用，以在 Node.js 環境中執行綑綁和開發任務。 FuseBox 插件功能允許我們將多個插件添加到 FuseBox 模組中。

該範例首先從 'fuse-box' 封裝中導入 'fusebox' 和 'sparky'，然後定義一個名為 Context 的類別，其中包含一個返回 FuseBox 配置對象的方法 getConfig。它配置以下設定：目標是瀏覽器，以 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>

以上的 HTML 範本為 FuseBox 項目設定了一個簡單的頁面。它包括字符编码和響應式設計的元數據。佔位符 $bundles 會由 FuseBox 動態替換為正確的腳本和樣式標籤，以確保捆綁資源正確加載，讓 JavaScript 和 CSS 以最佳化的方式加載。

建立一個 TypeScript 檔案

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

js

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/**/*"]
}

js

JAVASCRIPT

完成後執行代碼。它將應用程式託管在 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

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,
});
fuse.runDev();

js

JAVASCRIPT

此腳本建立一個 FuseBox 實例來組合伺服器端腳本。它首先從 fuse-box 套件中導入 fusebox 函數，然後使用特定的設定來自訂 FuseBox。「server」設定表示輸出是用於 Node.js 環境，而非網頁瀏覽器。 src/index.ts 指向主要的 TypeScript 文件以啟動捆綁程序。

依賴項：{ 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:
    "",
});
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}`);
});

js

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，並記錄訊息以確認伺服器的運行狀態。