ノードヘルプ

NPM fuse-box (開発者のための仕組み)

公開済み 2024年10月24日

共有:

バンドルは、最新のNode.jsアプリケーションのツールキットにおいて重要なツールとなっています。バンドル-Webpack、Roll up、Vite-handleは、コードとアセットをパッケージ化します。これらのツールは、多くの異なるファイルを1つまたは少数の最適化されたバンドルに統合し、ネットワークリクエストの数を減らすことでパフォーマンスを向上させ、効率的に読み込むコードを提供します。さらに、ほとんどのバンドルには、コード分割、ホットモジュール置換、ツリーシェイクなど、開発者やエンドユーザーとしての経験を向上させるエキストラがすでに用意されています。

バンドルは、ビルドツールや最新のJavaScript標準と統合することで、リソースの配信を最適化し、デプロイメントワークフローをスムーズにするため、スケーラブルで保守性の高いアプリケーションを実現する重要なツールです。この記事では、IronPDF Node.jsライブラリのバンドラーのベンチマーク例としてNPM fuse boxを使用します。

イントロダクション

ヒューズボックスNPM packageは、最も高速で、コンテキスト駆動型で、最も先進的なバンドルツールであり、最新のWebアプリケーションの資産を簡単に管理し、バンドルすることができます。開発者の効率性に関しては、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をインストールするには

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#

この簡単な例は、Node.js環境でバンドルと開発タスクを実行するためのFuseBoxの設定と使用方法です。 FuseBoxのプラグイン機能により、Fuxeboxモジュールに複数のプラグインを追加することができます。

この例では、まず 'fuse-box' パッケージから 'fusebox' と 'sparky' をインポートし、FuseBox 設定オブジェクトを返す getConfig メソッドを持つ Context クラスを定義します。ブラウザをターゲットとし、src/index.tsをエントリポイントとして、src/index.htmlをウェブインデックスのテンプレートとして使用します。最後に、開発サーバーの設定には、以下の最小限の設定オプションが付属しています：HMR、キャッシング、ソース・マップ、ログが非常に迅速に表示されます。

次のステップでは、sparkyユーティリティを使ってタスクを定義します。タスク('デフォルト')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のコード行は、現在のWebページのbody要素のHTMLコンテンツを設定します。この翻訳はタグに新しい

見出し要素見出しのテキストは「こんにちは、FuseBox」と表示されます。!申し訳ありませんが、翻訳するための具体的なテキストが提供されていません。翻訳するコンテンツを提供していただければ、日本語に翻訳いたします。要するに、JavaScriptを使ってウェブページに動的にコンテンツを追加したり更新したりする非常にシンプルな方法です。

TypeScriptの構成

TypeScriptの設定を追加するためのtsconfig.jsonファイルを生成する。

{
  "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. HTMLをPDFに変換したり、既存のPDFを編集するなど、PDFに関連する多くのプログラミングベースの操作で利用されます。 IronPdfはPDFを動的に生成・処理する必要のあるプログラムにとって非常に有用なツールです。高品質のPDFドキュメントを作成するためのシンプルで適応性の高いソリューションを提供します。

NPM fuse-box（開発者のための仕組み）：図4 - IronPDF

IronPDFパッケージをインストールする

Node.jsがIronPDF機能を有効にするためのパッケージをインストールするためにNPMを使用してください。

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#

このスクリプトは、IronPDFライブラリーでPDFを生成するためにExpressフレームワークを利用したNode.jsサーバーを確立します。最初に、必要なモジュールが含まれています：サーバーの操作にはExpressを、PDFタスクの処理には@ironsoftware/ironPdfを使用します。 PDFを作成するために必要なIronPDFのライセンスキーを設定します。 PDFのHTMLは文字列として宣言され、ユーザーのための基本的なスタイルと詳細が組み込まれています。

次に、Expressアプリケーションを開発し、/generate-pdfというURLパスを設定します。このパスのリクエストを受け取ると、サーバーはIronPDFのPdfDocumentクラスを使用して、与えられたHTMLコンテンツからPDFを生成します。このPDFはバッファに保存され、正しいコンテンツタイプでクライアントに返されます。この手順中にエラーが発生した場合、サーバーは500ステータスコードとエラーメッセージを返信します。最終的に、サーバーはデフォルトで指定されたポート3000をリッスンするように設定され、サーバーの動作状態を確認するためのメッセージが記録されます。

IronPDFスクリプトのバンドル

これで、ヒューズボックスバンドルスクリプトを実行できるようになりました。

NPM fuse-box（開発者のための仕組み）：図 5 - fuse-box モジュールローダー

これは、ファイルを別のファイルにバンドル/最小化します。生成されたファイルの助けを借りて、スクリプトを実行することができます。

NPM fuse-box（開発者のための仕組み）：図6 - 出力バンドル

上記は、ヒューズボックスの助けを借りて生成されたミニファイファイルです。

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.NETは、Windows、Android、MAC Linuxなど、さまざまな環境でアプリケーションを簡単に構築するのに役立つさまざまな種類のライブラリを提供しています、

次へ >
snowpack NPM (開発者のための仕組み)