ノードヘルプ

NPM fuse-box (開発者向けのしくみ)

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

更新日:7月 28, 2025

バンドルは、モダンなNode.jsアプリケーションのツールキットにおいて重要なツールになりました。バンドラー — Webpack、Rollup、Vite — は、コードとアセットを処理しパッケージ化します。それらは多くの異なるファイルを一つまたはいくつかの最適化されたバンドルに統合し、ネットワークリクエストの数を減らし、コードを効果的に読み込むことでパフォーマンスを向上させます。さらに、ほとんどのバンドルは既に、コード分割やホットモジュールリプレースメント、ツリーシェイキングといったエクストラを備えており、開発者やエンドユーザーとしての体験を向上させます。

バンドラーは、リソースの配送を最適化し、スムーズなデプロイメントワークフローを提供するために、ビルドツールとの統合を通じてスケーラブルでメンテナブルなアプリケーションをサポートする上で重要な要素です。この記事では、IronPDF Node.jsライブラリを使用したバンドラーのベンチマーク例としてNPM FuseBoxを使用します。

The FuseBox NPMパッケージは、最速でコンテキスト駆動型かつ最も未来指向のバンドラーであり、モダンウェブアプリケーションのアセットを楽に管理しバンドルすることを可能にします。開発者の効率性に関しては、FuseBoxモジュールローダーは簡単な設定を提供し、開発者が迅速にプロジェクトを構築開始するのを支援します。ライブリロード、コード分割、ツリーシェイキングなど、すべての望ましい機能をサポートし、開発を容易にし最終的な出力を高度に最適化します。

NPM fuse-box (How It Works For Developers): Figure 1 - fuse-box

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

SHELL

fuse-boxのインストール

fuse-boxおよびTypeScriptなどの他の依存関係をインストールします。

npm install fuse-box typescript --save-dev

npm install fuse-box typescript --save-dev

SHELL

FuseBox構成ファイルを作成する

FuseBoxを設定するためにfuse.jsファイルを作成します。

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

この単純な例は、Node.js環境でのバンドルおよび開発タスクを実行するためのFuseBoxの設定と使用法です。例はまず、'fusebox' と 'sparky' を 'fuse-box' パッケージからインポートし、FuseBoxの設定オブジェクトを返すgetConfigメソッドを持つクラスContextを定義します。次に示す設定を行います: ブラウザをターゲットに、エントリーポイントとして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は、バンドルされたアセットが確実に読み込まれるように、さらにJavaScriptやCSSを最適な方法で読み込むために、正しいスクリプトとスタイルタグでFuseBoxにより動的に置き換えられます。

TypeScriptファイルを作成する

// Set the HTML content of the body element
document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';

このJavaScriptの行は、現在のウェブページのbody要素のHTMLコンテンツを設定します。 <body>タグ内のコンテンツを新しい<h1>見出し要素によって置き換えます。見出しのテキストは「Hello, FuseBox!」を表示します。本質的に、JavaScriptを使用してウェブページ上のコンテンツを動的に追加または更新する非常に簡単な方法です。

TypeScript設定

TypeScriptの設定の追加設定を保持するtsconfig.jsonファイルを生成します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

完了後、コードを実行します。 localhost:4444にアプリケーションをホストします。

NPM fuse-box (How It Works For Developers): Figure 2 - Console Output

与えられたlocalhostポートからページを表示することができます。以下のスクリーンショットのように表示されます。

NPM fuse-box (How It Works For Developers): Figure 3 - Application Output

IronPDFの紹介: PDF作成ツール

PDF文書の作成、修正、変換、編集には、強力なNode.jsパッケージIronPDFを利用します。それは、HTMLからPDFへの変換や既存のPDFの編集など、PDFに関連する多くのプログラミングベースの操作に使用されます。 IronPDFは、動的にPDFを生成および処理する必要があるプログラムにとって非常に役立つツールです。それは、高品質のPDF文書を作成するためのシンプルで適応性のあるソリューションを提供します。

NPM fuse-box (How It Works For Developers): Figure 4 - IronPDF

Install IronPDF package

Node.jsでIronPDF機能を有効にするためのパッケージをNPMでインストールします。

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

SHELL

IronPDFと連携するFuse-Boxバンドル

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

このスクリプトはIExpressフレームワークを使用してIronPDFライブラリでPDFを生成するNode.jsサーバーを確立します。最初に、サーバーの操作用と@ironsoftware/ironpdf用のモジュールを読み込み、PDFタスクを処理します。 PDFの作成にはライセンスキーが必要で、HTMLは基礎的なスタイリングとユーザーの詳細を含む文字列として宣言されます。次にExpressアプリケーションが開発され、URLパス/generate-pdfが確立されます。

このパスへのリクエストを受け取るたびに、サーバーはIronPDFのPdfDocumentクラスを使用して、指定されたHTMLコンテンツからPDFを生成します。このPDFはバッファに保存され、クライアントに正しいコンテンツタイプで返されます。この手続き中にエラーが発生した場合、サーバーは500ステータスコードとエラーメッセージで応答します。最終的に、サーバーは指定されたポート3000でリッスンするように設定され、サーバーの稼働状態を確認するメッセージを記録します。 #### IronPDFスクリプトのバンドル

これで、fuse boxバンドリングスクリプトを実行できます。

ファイルを個別のファイルにバンドル/最小化します。生成されたファイルを使用してスクリプトを実行できます。

上記は、fuse boxを使用して生成された最小化ファイルです。

最小化されたファイルを通常のNode.jsファイルとして実行できます。

コードを透かし無しで機能させるには、ライセンスキーが必要です。

ライセンス

開発者はここで試用ライセンスを取得するためにサインアップできます。クレジットカードを提供する必要はありません。無料トライアルに登録する際、メールアドレスを入力するだけで済みます。 FuseBoxとIronPDFの組み合わせは、サーバー上で強力なPDFを作成し、フロントエンドでアセットをパッケージ化する上で重要な影響を持ちます。

結論

FuseBoxはウェブリソースをグループ化し改善することで、ウェブアプリの構築と起動を容易にします。一方で、IronPDFはHTMLコードから直接ドキュメントを作成し、PDFの作成に優れています。これらのツールを組み合わせて使用することで、オンラインアプリの動作が良くなり、開発プロセスが迅速化されます。

アセット管理とPDF作成が連携して機能するようにすることで、開発者は優れた機能を持ち、早く動作し、ドキュメントをより多様に利用できるアプリケーションを構築し発行できます。 Iron Software はWindows、Android、MAC、Linuxなどのさまざまな環境でアプリケーションを簡単に構築するためのさまざまな種類のライブラリを提供しています。 By using IronPDF to make PDFs and FuseBox to package things, developers can build and put out apps that have cool features, work faster, and can do more with documents.

Iron Software offers various types of libraries that help us to build applications easily for various environments like Windows, Android, MAC, Linux, etc.

Darrius Serrant

今すぐエンジニアリングチームとチャット

フルスタックソフトウェアエンジニア（WebOps）

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。