1. IronPDF for Node.js
  2. IronPDF for Node.js 部落格
  3. 節點幫助
  4. NPM fuse-box
節點幫助

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

發佈 2024年10月24日
分享:

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

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

介紹

FuseBoxNPM 套件是最快的、以上下文驅動的、最前瞻性的打包器，讓您可以輕鬆管理和打包現代網絡應用的資產。 關於開發者效率，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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir fusebox-project cd fusebox-project npm init -y
VB   C#

安裝 fuse-box

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

npm install fuse-box typescript --save-dev
npm install fuse-box typescript --save-dev
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install fuse-box typescript --save-dev
VB   C#

建立 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();
});
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();
});
'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private fusebox, sparky } = require( 'fuse-box');
Friend Class Context
'node fuse dist
  Private Function getConfig() As Private
	Return fusebox({ target: 'browser', entry: 'src/index.ts', webIndex: { template: 'src/index.html'}, devServer: True, hmr: True, cache: True, logging: { level: 'succinct'}, sourceMap: True});
  End Function
End Class
'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private task, exec, rm } = sparky(Context)
task( 'default', async(ctx) =>
If True Then
	rm( 'dist');
	const fuse = ctx.getConfig()
	Await fuse.runDev()
End If
)
task( 'dist', async(ctx) =>
If True Then
	rm( 'dist');
	const fuse = ctx.getConfig()
	Await fuse.runProd()
End If
)
VB   C#

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

該範例首先從 'fuse-box' 封裝中導入 'fusebox' 和 'sparky'，然後定義一個名為 Context 的類別，其中包含一個返回 FuseBox 配置對象的方法 getConfig。 它配置以下設定：目標是瀏覽器，以 src/index.ts 作為入口點，並以 src/index.html 作為網頁索引的模板。 最後，開發伺服器的配置附帶以下最少的配置選項：HMR、高速緩存、原始碼對應和非常快速的日誌。

下一步將是使用sparky工具定義任務。 任務('default')清理 dist 目錄，取得 FuseBox 配置，並啟動開發伺服器。 同樣地，任務(「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>
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<!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>
VB   C#

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

建立一個 TypeScript 檔案

document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';
document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'document.body.innerHTML = '<h1> Hello, FuseBox!</h1>';
VB   C#

這行 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/**/*"]
}
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}
If True Then
  "compilerOptions":
  If True Then
	"target": "es5", "module": "commonjs", "strict": True, "esModuleInterop": True, "skipLibCheck": True, "forceConsistentCasingInFileNames": True
  End If
 , "include": ("src/**/*")
End If
VB   C#

完成後執行代碼。 它將應用程式託管在 localhost:4444：

NPM fuse-box（開發人員如何運作）：圖 2 - 控制台輸出

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

NPM fuse-box（對開發人員的工作方式）：圖 3 - 應用程序輸出

介紹 IronPDF：PDF 創建器

使用強大的 Node.js 套件進行 PDF 文檔的創建、修改、轉換和編輯。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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @ironsoftware/ironpdf
VB   C#

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();
const { fusebox} = require('fuse-box');
const fuse = fusebox({
  target: 'server',
  entry: 'src/index.ts',
  dependencies: {
    ignoreAllExternal: false,
  },
  watch: true,
  cache: false,
});
fuse.runDev();
'INSTANT VB TODO TASK: The following line could not be converted:
const
If True Then
	fusebox} = require( 'fuse-box');
const fuse = fusebox({ target: 'server', entry: 'src/index.ts', dependencies: { ignoreAllExternal: False}, watch: True, cache: False});
fuse.runDev()
VB   C#

此腳本建立一個 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}`);
});
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}`);
});
const express = require("express")
const IronPdf = require("@ironsoftware/ironpdf")
Dim config = IronPdf.IronPdfGlobalConfig
config.setConfig({ licenseKey:= ""})
const htmlContent = ` (Of html) (Of head) (Of style) body
If True Then
	If True Then
		font-family: Arial, sans-serif
	End If
End If
		h1
		If True Then
			If True Then
				color:
				navy
			End If
		End If
		p
		If True Then
			If True Then
				font-size: 14px
			End If
		End If
	</style> </head> (Of body) (Of h1) User Details</h1> (Of p)(Of strong) ID:</strong> 1</p> (Of p)(Of 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 Sub(req, res)
	const document = IronPdf.PdfDocument
	console.log("Requesting:generate-pdf")
	Try
		Dim result As let = Await document.fromHtml(htmlContent)
		const pdfBuffer = Await result.saveAsBuffer()
		res.setHeader("Content-Type", "application/pdf")
		res.send(pdfBuffer)
	Catch e1 As [error]
		console.error("PDF generation error:", [error])
		res.status(500).send("PDF generation error")
	End Try
End Sub)
const PORT = process.env.PORT 3000
app.listen(PORT, Sub()
	console.log(`Server running on port ${PORT}`)
End Sub)
VB   C#

此腳本利用 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 fuse-box（它如何為開發者工作）：圖5 - fuse-box 模組載入器

它將把檔案打包/壓縮成一個單獨的檔案。憑藉生成的檔案，我們可以運行該腳本。

NPM fuse-box（對開發人員的運作方式）：圖6 - 輸出包

以上是利用 fuse box 生成的壓縮檔案。

NPM fuse-box（開發者運作方式）：圖 7 - PDF 主控台輸出

我們可以像運行普通 Node.js 文件一樣運行縮小的文件。

NPM fuse-box（對開發者的運作方式）：圖 8 - PDF 輸出

授權

我們需要一個許可證金鑰才能使程式碼在沒有浮水印的情況下運行。 開發人員可以註冊在此獲取試用許可證. 您不必提供信用卡即可獲得一個。 當您註冊免費試用時，只需輸入您的電子郵件地址。

結論

FuseBox 和 IronPDF 的結合在伺服器上生成強大的 PDF 並在前端打包資產方面有著顯著的影響。 FuseBox 通過分組和改進 Web 資源，使構建和啟動 Web 應用程式變得更容易。 同時，IronPDF 可讓您直接從 HTML 代碼製作文檔，並擅長創建 PDF 文件。

這些工具一起使用時，會令線上應用程式運行得更好，並加快開發過程。 他們透過確保資產管理和創建PDF相互協作來實現這一點。 透過使用 IronPDF 製作 PDF 和 FuseBox 打包文件，開發人員可以構建和發布應用程式，使其具備酷炫的功能、更高的速度，以及更強大的文檔處理能力。

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

下一個 >
snowpack NPM（對開發者的運作方式）

使用 npm 安裝

版本：2024.11

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

免費 npm 安裝 查看許可證 >