TypeScript#

如何使用#

可以通过 builtin:swc-loader 来启用 TypeScript 支持。

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 枚举，依赖于解析整个项目，因此不能与独立模块转译一起使用。在你的 tsconfig.json 文件中启用 isolatedModules，以确保你的 IDE 提示和类型检查器准确地反映 Rspack 的模块处理行为。

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

类型检查#

你可以使用 fork-ts-checker-webpack-plugin 在编译期间执行 TypeScript 类型检查。但是，重要的是要注意，TypeScript 的类型检查可能非常耗时，特别是对于大型项目。这意味着类型检查所需的时间可能超过 Rspack 本身的构建时间。

如果你在开发模式下使用该插件，它不会阻止构建，你可以继续构建过程。但是，在构建模式下，插件会阻塞构建，直到类型检查完成，这可能会导致构建时间更长。

根据你的实际需求，你应该决定是否启用此插件。如果类型检查过程成为构建过程中的瓶颈，我们建议使用 TypeScript 的增量构建功能。此功能可以通过仅分析自上次构建以来的更改文件来大大加快类型检查过程。

要启用 TypeScript 的增量构建，你可以独立使用 tsc --incremental 或 在插件中启用增量模式。

启用增量构建可以帮助减少类型检查时间，尤其是在仅修改了几个文件的情况下。这样，你就可以优化构建过程，而不会牺牲类型检查的好处。

请记住，在你的特定项目中评估构建速度和类型检查准确性之间的权衡，并选择最合适的方法。

JSX 和 TSX#

可以通过 builtin:swc-loader 来启用 TSX|JSX 支持。

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 类型文档 以了解更多详细信息。

   tsconfig.json

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