Message icon
フッターコンテンツにスキップ
  1. IronPDF for Node.js
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. NPM fuse-box
ノードヘルプ

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

Darrius Serrant
Darrius Serrant
更新日:

バンドルは、モダンな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 (開発者向けの動作方法): 図 4 - IronPDF

IronPDFパッケージのインストール

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

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

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

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

さあ、ヒューズボックスのバンドルスクリプトを実行できます。

NPM fuse-box (開発者のための機能): 図5 - fuse-boxモジュールローダー

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

NPM fuse-box (開発者にとっての働き方): 図6 - 出力バンドル

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

NPM fuse-box (開発者のための機能): 図7 - PDFコンソール出力

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

NPM fuse-box (開発者にとっての働き方): 図8 - PDF出力

ライセンス

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

結論

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

アセット管理とPDF作成が連携して機能するようにすることで、開発者は優れた機能を持ち、早く動作し、ドキュメントをより多様に利用できるアプリケーションを構築し発行できます。 彼らは、資産の管理とPDFの作成が協力して機能することを確認することでこれを行います。 IronPDFを使用してPDFを作成し、FuseBoxを使用してパッケージ化することで、開発者はクールな機能を持ち、より速く動作し、ドキュメントでより多くのことができるアプリを作成し、提供することができます。

ソフトウェアは、Windows、Android、MAC、Linuxなど、さまざまな環境でアプリケーションを簡単に構築できるよう、さまざまな種類のライブラリを提供しています。

Darrius Serrant
Darrius Serrant
  今すぐエンジニアリングチームとチャット
フルスタックソフトウェアエンジニア（WebOps）

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

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

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

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアル