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 將會單獨轉譯每個模組。這需要您在 TypeScript 設定中啟用 isolatedModules，以確保 tsc 對原始碼進行類型檢查。某些語言特性（例如 const enums）依賴於解析整個專案，因此無法與隔離模組轉譯一起使用。請在您的 tsconfig.json 檔案中啟用 isolatedModules，以確保您的 IDE 提示和類型檢查器能夠準確反映 Rspack 的模組處理行為。

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

類型檢查#

您可以使用 fork-ts-checker-webpack-plugin 在編譯期間執行 TypeScript 類型檢查。但是，請務必注意，TypeScript 的類型檢查可能相當耗時，尤其是在較大型的專案中。這表示類型檢查所需的時間可能會超過 Rspack 本身的建置時間。

如果您在開發模式中使用此插件，它不會阻擋建置，您可以繼續進行建置過程。但是，在建置模式中，此插件會阻擋建置，直到類型檢查完成，這可能會導致更長的建置時間。

根據您的實際需求，您應該決定是否啟用此插件。如果類型檢查過程成為您建置過程中的瓶頸，我們建議您使用 TypeScript 的增量建置功能。此功能可以透過僅分析自上次建置以來變更的檔案，大幅加快類型檢查過程。

若要啟用 TypeScript 的增量建置，您可以獨立使用 tsc --incremental 或在插件中啟用增量模式。

啟用增量建置可以幫助減少類型檢查時間，尤其是在僅修改少數檔案時。這樣一來，您就可以在不犧牲類型檢查優點的情況下，最佳化您的建置過程。

請記得評估您特定專案中建置速度與類型檢查準確性之間的權衡，並據此選擇最佳方法。

JSX 和 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。

用戶端類型#

您可以在 TypeScript 程式碼中使用 webpack 或 Rspack 特定功能的類型，例如 import.meta.webpackContext。

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. 您也可以將 @rspack/core/module 新增至 tsconfig.json 的 types 欄位。您可以參考 tsconfig types 文件 以取得更多詳細資訊。

   tsconfig.json

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