CC 4.0 ライセンス

このセクションの内容は、以下のリンクの内容から派生したものであり、CC BY 4.0 ライセンスの対象となります。
https://webpack.dokyumento.jp/api/node/
以下の内容は、特に明記されていない限り、元のコンテンツに基づいて変更および削除された結果であると想定できます。

JavaScript API

Rspackは、Node.jsやBunのようなJavaScriptランタイムで使用するJavaScript APIのセットを提供します。

JavaScript APIは、ビルドまたは開発プロセスをカスタマイズする必要がある場合に役立ちます。すべてのレポートとエラー処理を手動で行う必要があり、webpackはコンパイル部分のみを行うためです。このため、stats 設定オプションは rspack() 呼び出しでは効果がありません。

ヒント

@rspack/core は、webpackのJavaScript APIに基づいて設計されており、機能の一貫性と同様のユーザーエクスペリエンスを保証します。

インストール

Rspack JavaScript APIの使用を開始するには、まず @rspack/core をインストールします（まだインストールしていない場合）。

npm

yarn

pnpm

bun

npm add @rspack/core -D

次に、JavaScriptファイルで @rspack/core モジュールをrequireします。

build.js

import { rspack } from '@rspack/core';

rspack()

インポートされたrspack関数は、Rspack設定オブジェクトを受け取り、コールバック関数が提供されている場合にRspackコンパイラを実行します。

import { rspack } from '@rspack/core';

rspack({}, (err, stats) => {
  if (err || stats.hasErrors()) {
    // ...
  }
  // Done processing
});

function rspack(
  options: MultiRspackOptions | RspackOptions,
  callback?: Callback<Error, MultiStats | Stats>,
): null | MultiCompiler | Compiler;

ヒント

err オブジェクトには、コンパイルエラーは含まれません。これらは、stats.hasErrors() を使用して個別に処理する必要があります。詳しくは、このガイドのエラー処理セクションで説明します。 err オブジェクトには、設定ミスなど、rspack関連の問題のみが含まれます。

ヒント

rspack 関数に設定の配列を提供できます。詳しくは、以下のマルチコンパイラセクションを参照してください。

コンパイラインスタンス

rspack ランナー関数にコールバックを渡さない場合、Rspack Compiler インスタンスが返されます。このインスタンスを使用して、Rspackランナーを手動でトリガーしたり、CLIのように変更をビルドして監視したりできます。 Compiler インスタンスは、次のメソッドを提供します。

.run(callback)
.watch(watchOptions, handler)

通常、マスター Compiler インスタンスは1つだけ作成されますが、特定のタスクを委任するために子コンパイラを作成できます。 Compiler は最終的に、ライフサイクルを実行し続けるための最小限の機能を実行する関数です。ロード、バンドル、書き込みのすべての作業を登録済みプラグインに委任します。

Compiler インスタンスの hooks プロパティは、Compiler のライフサイクルの任意のフックイベントにプラグインを登録するために使用されます。RspackOptionsApply ユーティリティは、Rspackがすべての組み込みプラグインを使用して Compiler インスタンスを設定するために使用されます。

詳しくは、コンパイラ API を参照してください。

Compiler.ts

実行

run メソッドは、すべてのコンパイル作業を開始するために使用されます。完了すると、指定された callback 関数が実行されます。統計情報とエラーの最終的なロギングは、この callback 関数で行う必要があります。

警告

APIは、一度に1つの同時コンパイルのみをサポートします。 run または watch を使用する場合、close を呼び出して完了するまで待ってから、run または watch を再度呼び出してください。同時コンパイルを実行すると、出力ファイルが破損します。

import { rspack } from '@rspack/core';

const compiler = rspack({
  // ...
});

compiler.run((err, stats) => {
  // ...

  compiler.close(closeErr => {
    // ...
  });
});

監視

watch メソッドを呼び出すと、rspackランナーがトリガーされますが、変更を監視し（CLI：rspack --watchのように）、Rspackが変更を検出するとすぐに再実行されます。 Watching のインスタンスを返します。

import { rspack } from '@rspack/core';

const compiler = rspack({
  // ...
});

const watching = compiler.watch(
  {
    // Example
    aggregateTimeout: 300,
    poll: undefined,
  },
  (err, stats) => {
    // Print watch/build result here...
    console.log(stats);
  },
);

Watching オプションの詳細は、こちらを参照してください。

警告

ファイルシステムの不正確さにより、1つの変更に対して複数のビルドがトリガーされる場合があります。上記の例では、1回の変更に対して console.log ステートメントが複数回発生する可能性があります。ユーザーはこの動作を予期し、stats.hash をチェックしてファイルハッシュが実際に変更されたかどうかを確認する必要があります。

詳しくは、Compiler.watch を参照してください。

Watching.ts

統計情報オブジェクト

rspack() コールバックの2番目の引数として渡される stats オブジェクトは、コードのコンパイルプロセスに関する優れた情報源です。以下が含まれます。

エラーと警告（ある場合）
タイミング
モジュールとチャンクの情報

Rspack CLI は、この情報を使用して、コンソールに適切にフォーマットされた出力を表示します。

ヒント

MultiCompiler を使用する場合、stats と同じインターフェース（つまり、以下で説明するメソッド）を満たす MultiStats インスタンスが返されます。

詳しくは、統計情報 API を参照してください。

Stats.ts

マルチコンパイラ

MultiCompiler モジュールを使用すると、Rspackは複数の設定を個別のコンパイラで実行できます。RspackのJavaScript APIの options パラメータがオプションの配列である場合、Rspackは個別のコンパイラを適用し、すべてのコンパイラが実行された後にコールバックを呼び出します。

import { rspack } from '@rspack/core';

rspack(
  [
    { entry: './index1.js', output: { filename: 'bundle1.js' } },
    { entry: './index2.js', output: { filename: 'bundle2.js' } },
  ],
  (err, stats) => {
    process.stdout.write(stats.toString() + '\n');
  },
);

詳しくは、マルチコンパイラ API を参照してください。

エラー処理

適切なエラー処理のために、次の3種類のエラーを考慮する必要があります。

致命的なrspackエラー（設定ミスなど）
コンパイルエラー（モジュールの欠落、構文エラーなど）
コンパイルの警告

すべての条件を処理する例を次に示します。

import { rspack } from '@rspack/core';

rspack(
  {
    // ...
  },
  (err, stats) => {
    if (err) {
      console.error(err.stack || err);
      if (err.details) {
        console.error(err.details);
      }
      return;
    }

    const info = stats.toJson();

    if (stats.hasErrors()) {
      console.error(info.errors);
    }

    if (stats.hasWarnings()) {
      console.warn(info.warnings);
    }

    // Log result...
  },
);

カスタムファイルシステム

webpackとの違い

Rspackにおける inputFileSystem の現在のサポートは限定的であり、webpackと一致するファイルシステム読み取り機能をカスタマイズする機能はまだ実装されていません。 Issue #5091 を参照してください。
Rspackでは、指定された出力ファイルシステムを使用する場合、mkdirp および join ユーティリティメソッドを提供する必要がなくなりました。

デフォルトでは、Rspackは通常のファイルシステムを使用してファイルの読み取りと書き込みをディスクに行います。ただし、別の種類のファイルシステム（メモリ、webDAVなど）を使用して、入力または出力の動作を変更することができます。これを実現するために、inputFileSystem または outputFileSystem を変更できます。たとえば、デフォルトの outputFileSystem を memfs に置き換えて、ディスクではなくメモリにファイルを書き込むことができます。

import { createFsFromVolume, Volume } from 'memfs';
import { rspack } from '@rspack/core';

const fs = createFsFromVolume(new Volume());
const compiler = rspack({
  /* options */
});

compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
  // Read the output later:
  const content = fs.readFileSync('...');
  compiler.close(closeErr => {
    // ...
  });
});

`sources` オブジェクト

@rspack/core は、sources を介して webpack-sources モジュールをエクスポートします。これは、ソースコードの断片とソースマップを作成および操作するための一連のクラスを提供します。Rspackプラグインを開発する際に、これらのクラスを使用してソースコードを処理および操作できます。

import { sources } from '@rspack/core';

const { RawSource } = sources;
const source = new RawSource('console.log("Hello, world!");');

詳細な使用方法については、webpack-sources のドキュメントを参照してください。

このページの内容

JavaScript API#

インストール#

rspack()#

コンパイラインスタンス#

実行#

監視#

統計情報オブジェクト#

マルチコンパイラ#

エラー処理#

カスタムファイルシステム#

sources オブジェクト#