close
ガイド
設定
プラグイン
API
ブログ
概要
貢献
ガイド
設定
プラグイン
API
ブログ
概要
貢献
CC 4.0 ライセンス

このセクションの内容は、以下のリンクの内容から派生したものであり、CC BY 4.0 ライセンスの対象となります。

以下の内容は、特に明記されていない限り、元のコンテンツに基づいて変更および削除された結果であると想定できます。

ロガー

ログ出力は、エンドユーザーにメッセージを表示するための追加の方法です。

Rspack ロガーは、ローダーとプラグインで使用できます。統計情報の一部として出力され、rspack 設定でユーザーによって設定されます。

Rspack でのカスタムロギング API の利点

  • ロギング表示レベルを設定するための共通の場所
  • stats.jsonの一部としてエクスポート可能なログ出力
  • 統計情報のプリセットはログ出力に影響します
  • プラグインはロギングのキャプチャと表示レベルに影響を与える可能性があります
  • 複数のプラグインとローダーを使用する場合、それらは共通のロギングソリューションを使用します
  • Rspack 用の CLI、UI ツールは、ロギングを表示するさまざまな方法を選択できます
  • Rspack コアは、タイミングデータなど、ログ出力を出力できます

Rspack ロギング API を導入することにより、Rspack プラグインとローダーがログを出力する方法を統一し、ビルドの問題を検査するためのより良い方法を可能にすることを期待しています。統合ロギングソリューションは、開発エクスペリエンスを向上させることにより、プラグインとローダーの開発者をサポートします。ダッシュボードやその他の UI などの CLI 以外の Rspack ソリューションへの道を開きます。

ログのノイズを避ける

ログのノイズを避けましょう！

複数のプラグインとローダーが一緒に使用されることに注意してください。ローダーは通常、複数のファイルを処理し、すべてのファイルに対して呼び出されます。ログ出力を有益に保つために、できるだけ低いロギングレベルを選択してください。

例

プラグインの場合

2種類のロギングメソッドがあります

  1. compilation.getLogger: コンテンツは統計情報内に保存されます。ロギングがコンパイルに関連している場合はこれを使用してください.
  2. compiler.getInfrastructureLogger: コンテンツは保存されません。ロギングがコンパイルサイクル外にある場合に使用します。

以下のようにプラグインで使用できます

MyPlugin.js
const PLUGIN_NAME = 'my-plugin';
export class MyRspackPlugin {
  apply(compiler) {
    // access Logger from compiler
    const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
    logger.log('log from compiler');

    compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
      // access Logger from compilation
      const logger = compilation.getLogger(PLUGIN_NAME);
      logger.info('log from compilation');
    });
  }
}

ローダーの場合

以下のようにローダーコンテキストからロガーを取得できます

MyLoader.js
module.exports = function (source) {
  // access Logger from loader
  const logger = this.getLogger('my-loader');
  logger.info('hello Logger');
  return source;
};

ロガー API

基本 API

型: (...args: any[]): void;

メソッドは、ログレベルに従って高いものから低いものへと順番に並んでいます

  • error: エラーメッセージ用。
  • warn: 警告用。
  • info: 重要な情報メッセージ用。これらのメッセージはデフォルトで表示されます。ユーザーが本当に見る必要があるメッセージにのみ使用してください。
  • log: 重要でない情報メッセージ用。これらのメッセージは、ユーザーがオプトインして表示することを選択した場合にのみ表示されます。
  • debug: デバッグ情報用。これらのメッセージは、ユーザーが特定のモジュールに対してデバッグロギングを表示することをオプトインした場合にのみ表示されます。

compilation.getLogger を使用する場合、出力レベルは stats.logging と stats.loggingDebug で制御できます

rspack.config.js
module.exports = {
  plugins: [{
    apply(compiler) {
      compiler.hooks.thisCompilation.tap("test plugin", compilation => {
        const logger = compilation.getLogger("TEST");
        logger.error("I am an error");
        logger.warn("I am a warning");
        logger.info("I am an information");
        logger.log("I am a log");
        logger.debug("I am a debug log");
      });
    }
  }],
  stats: {
    logging: "verbose",
    loggingDebug: true
  },
};
出力
asset main.js 264 bytes [emitted] (name: main)
runtime modules 124 bytes 2 modules
./index.js 15 bytes [built] [code generated]

DEBUG LOG from TEST
<e> I am an error
<w> I am a warning
<i> I am an information
    I am a log
    I am a debug log

compiler.getInfrastructureLogger を使用する場合、出力レベルは `infrastructureLogging.level` と `infrastructureLogging.debug` で制御できます

rspack.config.js
module.exports = {
  plugins: [{
    apply(compiler) {
      compiler.hooks.thisCompilation.tap("test plugin", compilation => {
        const logger = compiler.getInfrastructureLogger("TEST");
        logger.error("I am an error");
        logger.warn("I am a warning");
        logger.info("I am an information");
        logger.log("I am a log");
        logger.debug("I am a debug log");
      });
    }
  }],
  infrastructureLogging: {
    level: "verbose",
    debug: true
  },
};
出力
<e> [TEST] I am an error
<w> [TEST] I am a warning
<i> [TEST] I am an information
    [TEST] I am a log
    [TEST] I am a debug log
Rspack compiled successfully in 49 ms

assert

アサーションが false の場合にエラーを表示します。

  • レベル: error
  • 型:: assert(assertion: any, ...args: any[]): void;
rspack.config.js
logger.assert(false, "I am an assert error");
logger.assert(true, "Never displayed");
出力
LOG from TEST
<e> I am an assert error

status

進捗状況情報を表示します。存在する場合は `console.status` を使用し、そうでない場合は `console.info` にフォールバックします。

  • レベル: info
  • 型: status(...args: any[]): void
rspack.config.js
logger.status("status info");
出力
[TEST] status info

trace

スタックトレースを表示します。コンパイルロガーを使用している場合にのみ使用でき、`stats.loggingTrace` を有効にする必要もあります。

  • レベル: debug
  • 型: `trace(): void`
rspack.config.js
logger.trace();
出力
DEBUG LOG from TEST
    Trace
|     at Object.fn
|     at SyncHook.callAsyncStageRange

clear

すべてのログをクリアします。`console.clear()` と同様です。

  • レベル: log
  • 型: clear(): void;
rspack.config.js
logger.debug("not displayed");
logger.clear();
logger.debug("will displayed");
出力
[TEST] will displayed

グループ API

これらのメソッドが含まれています

  • `group(...args: any[]): void`: メッセージをグループ化します。`logger.log` のように折りたたまれて表示されます。-
  • `groupEnd(...args: any[]): void`: ロギンググループを終了します。
  • `groupCollapsed(...args: any[]): void`: メッセージをグループ化します。`logger.log` のように折りたたまれて表示されます。ロギングレベルが `'verbose'` または `'debug'` に設定されている場合は展開されて表示されます。
rspack.config.js
logger.group("Group");
logger.info("Info");
logger.log("Log");
logger.debug("Debug");
logger.groupCollapsed("Collapsed group");
logger.log("Log inside collapsed group");
logger.group("Inner group");
logger.log("Inner inner message");
logger.groupEnd();
logger.groupEnd();
logger.log("Log");
logger.groupEnd();
logger.log("End");
出力
<-> [TEST] Group
  <i> [TEST] Info
      [TEST] Log
      [TEST] Debug
  <-> [TEST] Collapsed group
        [TEST] Log inside collapsed group
    <-> [TEST] Inner group
          [TEST] Inner inner message
      [TEST] Log
    [TEST] End

時間 API

これらのメソッドが含まれています

  • `time(label: any): void`: タイマーを開始します。
  • `timeLog(label: any): void`: タイマーを終了せずに時間差を記録します。-
  • `timeEnd(label: any): void`: タイマーを終了し、時間差を記録します。-
  • `timeAggregate(label: any): void`: 時間差のキャプチャを集約します。
  • `timeAggregateEnd(label: any): void`: 集約キャプチャを終了し、合計差分を記録します。-
rspack.config.js
const wait = time => new Promise(resolve => setTimeout(resolve, time))
logger.time("normal");
await wait(100);
logger.timeLog("normal");
await wait(100);
logger.timeEnd("normal");

for (let i = 10;i--;) {
logger.time("aggregate")
await wait(i \* 10);
logger.timeAggregate("aggregate")
}
logger.timeAggregateEnd("aggregate")
出力
<t> [TEST] normal: 101.091167 ms
<t> [TEST] normal: 202.565 ms
<t> [TEST] aggregate: 460.416124 ms

プロファイル API

これらのメソッドが含まれています

  • `profile(label: any): void`: プロファイルのキャプチャを開始します。サポートされている場合は `console.profile` に委任されます。-
  • `profileEnd(label: any): void`: プロファイルのキャプチャを終了します。サポートされている場合は `console.profileEnd` に委任されます。-

子ロガー

`logger.getChildLogger()` で子ロガーを作成することもできます。子ロガーには同じメソッドがあります。

rspack.config.js
const logger = compiler.getInfrastructureLogger("TEST");
logger.info("logger info");
const childLogger = logger.getChildLogger("CHILD");
childLogger.info("child logger info");
出力
<i> [TEST] logger info
<i> [TEST/CHILD] child logger info