语言支持#

TypeScript#

TypeScript 是 Rspack 的一等公民，Rspack 内置了对 TypeScript 的处理能力。

我们默认会将 *.ts 结尾的文件视为 TypeScript 模块类型。Rspack 将会使用 SWC 完成 TypeScript 到 JavaScript 的转译，无需额外的配置。

如果你打算从 Webpack 进行迁移，那么你可以去除配置中的 babel-loader 或 ts-loader，使用 Rspack 内置的 TypeScript 转译功能，以达到更优的性能。具体可以参考迁移指南。

仅转译（Transpile-only）#

Rspack 仅会对源码进行转译，因此你需要使用其他工具（如：tsc）完成对源码的类型检查

isolatedModules#

Rspack 会为每一个模块分开转译，因此，这隐式地开启了 isolatedModules。 而某一些功能，如 const enum 则是依赖了对整个项目的分析，因此，这些功能将无法使用。你可以显式地在 tsconfig.json 中开启这个选项，以使得 Rspack 的模块处理行为与 IDE 提示或类型检查中保持一致。

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

类型检查#

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

如果你在开发模式下使用该插件，它将不会阻塞构建过程，你可以继续进行构建。但是，在构建模式下，该插件将会阻塞构建，直到类型检查完成。

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

要启用 TypeScript 的增量构建，你可以在独立使用 tsc --incremental 或者在插件里使用 incremental mode.

启用增量构建可以帮助减少类型检查的时间，特别是当只有少数文件被修改时。这样，你可以在优化构建过程的同时，不会损失类型检查的好处。

请记住，在你的具体项目中，需要权衡构建速度和类型检查准确性之间的权衡，并据此选择最佳方法。

JSX/TSX#

JSX/TSX 是 Rspack 的一等公民，Rspack 内置了对 JSX/TSX 的处理能力。

我们默认会将 *.jsx 和 *.tsx 结尾的文件视为 JSX/TSX 模块类型。

如果你使用了其他非 React 的 Library，可以通过 builtins.react 选项对 JSX 的转译进行配置。例如 Preact：

module.exports = {
  builtins: {
    react: {
      pragma: 'h',
      pragmaFrag: 'Fragment',
    },
  },
};

Alias#

点击 resolve.tsConfigPath 查看详情。

Node Polyfill#

Rspack 不会自动引入 Node Polyfill，如果你需要使用相应功能，你可以选择使用 @rspack/plugin-node-polyfill 插件，并在 rspack.config.js 完成配置：

const NodePolyfill = require('@rspack/plugin-node-polyfill');

module.exports = {
  plugins: [new NodePolyfill()],
};

静态资源处理#

Rspack 支持对静态资源的处理，包括图片、字体、视频等。

你需要在 rspack.config.js 中完成相关配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
      },
    ],
  },
};

上述选项会将所有的 *.png 文件视为资源模块，更多关于资源文件的处理可以参考资源模块。

CSS#

CSS 是 Rspack 的一等公民，Rspack 内置了对 CSS 的处理能力，你无需额外的配置即可使用。

我们默认会将 *.css 结尾的文件视为 CSS 模块类型，将 *.module.css 结尾的文件视为 CSS Modules 模块类型。

如果你打算从 Webpack 进行迁移，那么你可以去除配置中的 css-loader 或 style-loader 以使用 Rspack 内置的 CSS 处理能力，详情可以参考迁移指南。

CSS Modules#

Rspack 中可以引用一个 CSS Modules 文件，如：

.red {
  color: red;
}

这个模块将会被转换为一个 JavaScript 对象，你可以在 JavaScript 中引用它：

import { red } from './index.module.css';
document.getElementById('element').className = red;

更多关于 CSS Modules 的配置可以参考 builtins.css.modules。

PostCSS#

Rspack 已经完成了对 postcss-loader 的兼容，你可以这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        type: 'css/auto', // 如果你需要将 '*.module.css' 视为 CSS Module 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
      },
    ],
  },
};

上述配置会将所有 *.css 文件经过 postcss-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。

Less#

Rspack 已经完成了对 less-loader 的兼容，你可以这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              // ...
            },
          },
        ],
        type: 'css/auto', // 如果你需要将 '*.module.less' 视为 CSS Module 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
      },
    ],
  },
};

上述配置会将所有 *.less 文件经过 less-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。

Sass#

Rspack 已经完成了对 sass-loader 的兼容，你可以这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              // ...
            },
          },
        ],
        type: 'css/auto', // 如果你需要将 '*.module.(sass|scss)' 视为 CSS Module 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
      },
    ],
  },
};

上述配置会将所有 *.sass 文件经过 sass-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。

Tailwind CSS#

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了一系列样式类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

将 Tailwind CSS 作为 PostCSS 插件安装，是将其与 Rspack 整合的最佳方式。

安装 Tailwind CSS#

在你的项目中安装 tailwindcss、autoprefixer、postcss 和 postcss-loader 这些依赖：

npm install -D tailwindcss autoprefixer postcss postcss-loader

配置 Tailwind CSS#

安装完成后，你需要在 rspack.config.js 中配置 postcss-loader 来处理 CSS 文件，然后在 postcssOptions.plugins 中添加 tailwindcss。

下面是一个处理 .css 文件的配置示例，如果你需要处理 .scss 或 .less 文件，可以参考该示例进行修改。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: {
                  tailwindcss: {},
                  autoprefixer: {},
                },
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

到此为止，你已经完成了在 Rspack 中使用 Tailwind CSS 所需的构建配置。

接下来你可以按照 Tailwind CSS 官方文档中的步骤，添加 Tailwind CSS 所需的配置和代码，即可开始使用。

JSON#

JSON 是 Rspack 的一等公民，你可以直接导入，例如：

{
  "foo": "bar"
}

import json from './example.json';
json.foo; // bar