TypeScript#

使用方法#

TypeScriptのサポートは、builtin:swc-loaderを介して有効にすることができます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

トランスパイルのみ#

最高の速度を実現するために、builtin:swc-loaderは型チェックを実行せずにTypeScriptのソースコードをトランスパイルします。型チェックには、tscなどの外部ツールを使用する必要があります。

isolatedModulesの有効化#

並列処理を最大化するために、builtin:swc-loaderは各モジュールを個別にトランスパイルします。これには、tscによるソースコードの型チェックを確実にするために、TypeScriptの設定でisolatedModulesを有効にする必要があります。const enumなど、一部の言語機能はプロジェクト全体の解析に依存しているため、isolatedModulesによるトランスパイルでは使用できません。 tsconfig.jsonファイルでisolatedModulesを有効にして、IDEのヒントと型チェッカーがRspackのモジュール処理の動作を正確に反映するようにしてください。

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

型チェック#

fork-ts-checker-webpack-pluginを使用して、コンパイル中にTypeScriptの型チェックを実行できます。ただし、TypeScriptの型チェックは、特に大規模なプロジェクトでは時間がかかる場合があることに注意してください。これは、型チェックに必要な時間がRspack自体のビルド時間よりも長くなる可能性があることを意味します。

開発モードでプラグインを使用している場合、ビルドはブロックされず、ビルドプロセスを続行できます。ただし、ビルドモードでは、型チェックが完了するまでプラグインがビルドをブロックするため、ビルド時間が長くなる可能性があります。

実際のニーズに基づいて、このプラグインを有効にするかどうかを決定する必要があります。型チェックプロセスがビルドプロセスのボトルネックになっている場合は、TypeScriptのインクリメンタルビルド機能を使用することをお勧めします。この機能は、最後のビルド以降に変更されたファイルのみを分析することにより、型チェックプロセスを大幅に高速化できます。

TypeScriptのインクリメンタルビルドを有効にするには、tsc --incrementalを単独で使用するか、プラグインでインクリメンタルモードを有効にすることができます。

インクリメンタルビルドを有効にすることで、特に変更されたファイルが少ない場合に、型チェックの時間を短縮できます。これにより、型チェックの利点を犠牲にすることなく、ビルドプロセスを最適化できます。

特定のプロジェクトにおけるビルド速度と型チェックの精度のトレードオフを評価し、それに応じて最適なアプローチを選択してください。

JSX and TSX#

TSX|JSXのサポートは、builtin:swc-loaderを介して有効にすることができます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  pragma: 'React.createElement',
                  pragmaFrag: 'React.Fragment',
                  throwIfNamespace: true,
                  development: false,
                  useBuiltins: false,
                },
              },
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

エイリアス#

詳細は、resolve.tsConfigを参照してください。

クライアント型#

import.meta.webpackContextなど、webpackまたはRspack固有の機能の型をTypeScriptコードで使用できます。

Rspackは、@rspack/core/moduleを介してクライアントモジュール型を提供します。さまざまな方法で宣言できます。

1. TypeScript参照ディレクティブを追加して宣言する

   グローバルd.ts宣言ファイルに次のコンテンツを追加します

   src/index.ts

   /// <reference types="@rspack/core/module" />

   その後、任意のTypeScriptファイルで使用できます

   src/index.ts

   console.log(import.meta.webpackContext); // without reference declared above, TypeScript will throw an error

2. また、tsconfig.jsonのtypesフィールドに@rspack/core/moduleを追加することもできます。詳細は、tsconfig typesドキュメントを参照してください。

   tsconfig.json

   {
     "compilerOptions": {
       "types": ["@rspack/core/module"]
     }
   }