节点帮助

NPM fuse-box（如何为开发人员工作）

发布 2024年十月24日

捆绑包已成为任何现代 Node.js 应用程序工具包中的重要工具。捆绑程序-Webpack、Roll up、Vite 处理和打包代码和资产。这些工具将许多不同的文件合并成一个或几个优化的捆绑包，通过减少网络请求的数量和提供有效加载的代码来提高性能。此外，大多数捆绑包都已包含代码拆分、热模块替换和树形摇动等额外功能，可增加开发人员和最终用户的使用体验。

捆绑程序通过与构建工具和现代 JavaScript 标准的集成，优化了资源交付和顺畅的部署工作流，是可扩展和可维护应用程序的关键推动因素。在本文中，我们将以 NPM 保险丝盒为基准示例，介绍 IronPdf for Node.js 库的捆绑程序。

介绍

FuseBoxNPM package 是速度最快、上下文驱动且最具前瞻性的捆绑工具，可让您轻松管理和捆绑现代网络应用程序的资产。关于开发人员的效率，FuseBox 模块加载器的配置非常简单，可以帮助开发人员快速设置，开始构建项目。它支持所有所需的功能：实时重载、代码拆分、树状晃动等，使开发变得简单，最终输出得到高度优化。

NPM fuse-box（如何为开发人员工作）：图 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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir fusebox-project cd fusebox-project npm init -y

VB C#

安装保险丝盒

如果您正在使用，请安装 fuse-box 和其他依赖项（如 TypeScript）。

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 配置文件

创建用于配置 FuseBox 的 fuse.js 文件。

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 插件功能允许我们在 Fuxebox 模块中添加多个插件。

该示例首先从 "fuse-box "包中导入了 "fusebox "和 "sparky"，然后定义了一个带有 getConfig 方法的 Context 类，该方法会返回一个 FuseBox 配置对象。它配置了以下设置：以浏览器为目标，将 src/index.ts 作为入口点，将 src/index.html 作为网页索引模板。最后，开发服务器的配置包括以下最低配置选项：HMR、缓存、源映射和日志很快就能完成。

下一步将使用 sparky 工具定义任务。任务(默认)在此基础上，翻译人员还需要清除 dist 目录，获取 FuseBox 配置，并运行开发服务器。同样，任务('区)该工具会清除 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 项目设置了一个简单的页面。其中包括字符编码和响应式设计元数据。 FuseBox 会用正确的脚本和样式标签动态替换占位符 $bundles，以确保正确加载捆绑的资产，让 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 内容。它将替代

标签

标题元素。标题中的文字显示 "你好，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 - 控制台输出

我们可以从给定的 localhost 端口查看页面。译文将如下截图所示。

NPM fuse-box（如何为开发人员工作）：图 3 - 应用程序输出

介绍 IronPDF：PDF 创建工具

要创建、修改、转换和编辑 PDF 文档，请使用强大的 Node.js 软件包IronPDF. 在许多与 PDF 相关的基于编程的操作中都会用到它，例如将 HTML 转换为 PDF 和编辑已有的 PDF。对于需要动态生成和处理 PDF 的程序来说，IronPDF 是一个非常有用的工具。它为创建高质量的 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 Bundle With 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。服务器 "设置表示输出结果适用于 Node.js 环境，而非网络浏览器。条目："src/index.ts "指向启动捆绑程序的主要 TypeScript 文件。

依赖项：{ignoreAllExternal: false}确保不忽略外部依赖性，即在需要时将其添加到捆绑包中。 watch: true 功能允许在源文件更新时自动重建捆绑包，这有助于开发过程。最后，缓存：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，并记录一条信息以确认服务器的运行状态。