Rspack 如何支持 TypeScript？

Rspack 对 TypeScript 提供了原生支持，这使得开发者无需额外配置即可处理 TypeScript 文件，大大简化了开发流程。以下是 Rspack TypeScript 支持的详细说明：

原生 TypeScript 支持

Rspack 内置了 TypeScript 支持，这意味着：

1. 无需额外 Loader：

   • 不需要安装 ts-loader 或其他 TypeScript loader
   • 直接导入 .ts 和 .tsx 文件即可
   • 自动处理 TypeScript 编译

2. 类型检查：

   • 支持类型检查（可选）
   • 可以配置是否进行类型检查
   • 提供类型错误提示

3. 类型声明文件：

   • 支持 .d.ts 类型声明文件
   • 自动解析类型声明
   • 提供完整的类型支持

基本配置

最小配置

javascript
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'builtin:swc-loader',
        type: 'javascript/auto'
      }
    ]
  }
}

完整配置

javascript
module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            }
          }
        },
        type: 'javascript/auto'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
}

SWC Loader

Rspack 使用内置的 SWC Loader 来处理 TypeScript，SWC 是一个用 Rust 编写的超快 TypeScript/JavaScript 编译器：

SWC 的优势

1. 极快的编译速度：

   • 比 Babel 快 20-70 倍
   • 比 tsc 快 10-30 倍
   • 显著提升构建速度

2. 完整的 TypeScript 支持：

   • 支持所有 TypeScript 语法
   • 支持最新的 ECMAScript 特性
   • 兼容 TypeScript 配置

3. 低内存占用：

   • 比 Babel 占用更少内存
   • 适合大型项目
   • 更好的资源利用率

SWC 配置选项

javascript
{
  loader: 'builtin:swc-loader',
  options: {
    jsc: {
      parser: {
        syntax: 'typescript',
        tsx: true,
        decorators: true,
        dynamicImport: true
      },
      transform: {
        react: {
          runtime: 'automatic',
          importSource: '@emotion/react'
        },
        optimizer: {
          globals: {
            vars: {
              'process.env.NODE_ENV': 'production'
            }
          }
        }
      },
      target: 'es2015',
      loose: false,
      externalHelpers: true
    },
    env: {
      targets: 'defaults',
      coreJs: 3
    },
    sourceMaps: true,
    inlineSourcesContent: true
  }
}

tsconfig.json 集成

Rspack 可以读取和使用 tsconfig.json 配置：

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

类型检查

类型检查配置

Rspack 支持两种类型检查方式：

1. 构建时类型检查：

   javascript
   module.exports = {
     builtins: {
       pluginImport: [
         {
           libraryName: 'lodash',
           libraryDirectory: '',
           camel2DashComponentName: false
         }
       ]
     },
     plugins: [
       new rspack.ForkTsCheckerWebpackPlugin({
         typescript: {
           configFile: './tsconfig.json',
           memoryLimit: 4096
         }
       })
     ]
   }

2. 独立类型检查：

   • 使用 tsc --noEmit 单独运行类型检查
   • 在 CI/CD 流程中集成
   • 分离类型检查和构建过程

类型检查最佳实践

1. 开发环境：

   • 可以在开发时禁用类型检查以提升速度
   • 使用编辑器的类型检查功能
   • 保存时进行快速类型检查

2. 构建环境：

   • 在生产构建时启用完整类型检查
   • 确保代码质量
   • 阻止类型错误的代码部署

3. CI/CD：

   • 在持续集成中运行类型检查
   • 作为代码质量门禁
   • 结合其他检查工具

React + TypeScript

Rspack 对 React + TypeScript 提供了完整的支持：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic',
                  importSource: '@emotion/react'
                }
              }
            }
          }
        },
        type: 'javascript/auto'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
}

性能优化

1. 增量编译：

   • 利用 Rspack 的增量构建能力
   • 只重新编译变化的 TypeScript 文件
   • 大幅提升开发体验

2. 类型缓存：

   • 缓存类型检查结果
   • 避免重复的类型检查
   • 提升构建速度

3. 并行处理：

   • 并行处理多个 TypeScript 文件
   • 充分利用多核 CPU
   • 缩短构建时间

常见问题

1. 类型声明文件找不到：

   • 确保 @types 包已安装
   • 检查 tsconfig.json 配置
   • 验证类型声明文件路径

2. 类型检查错误：

   • 检查 tsconfig.json 配置
   • 确保类型定义正确
   • 使用 // @ts-ignore 或 // @ts-expect-error 临时忽略

3. 编译速度慢：

   • 确保使用 SWC Loader
   • 启用增量构建
   • 优化 tsconfig.json 配置

Rspack 的 TypeScript 支持为开发者提供了快速、高效的开发体验，通过合理的配置和优化，可以充分发挥 TypeScript 的类型安全优势，同时保持极快的构建速度。