【亲测免费】 Rsbuild 使用教程

项目介绍

Rsbuild 是一个高性能的构建工具，由 Rspack 驱动。它提供了一系列精心设计的默认构建配置，为用户提供开箱即用的开发体验，并能充分发挥 Rspack 的性能优势。Rsbuild 支持丰富的构建特性，包括 TypeScript、JSX、Sass、Less、CSS 模块、Wasm 等的编译，同时还支持模块联邦、图像压缩、类型检查、PostCSS、Lightning CSS 等功能。

项目快速启动

安装 Rsbuild

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Rsbuild：

npm install @rsbuild/core

创建项目

创建一个新的项目目录并初始化：

mkdir my-project
cd my-project
npm init -y

配置 Rsbuild

在项目根目录下创建一个 rsbuild.config.js 文件，并添加以下基本配置：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

运行开发服务器

在项目根目录下运行以下命令启动开发服务器：

npx rsbuild serve

应用案例和最佳实践

模块联邦

Rsbuild 团队与模块联邦开发团队紧密合作，提供对模块联邦的一流支持，帮助你开发具有微前端架构的大型 Web 应用程序。以下是一个简单的模块联邦配置示例：

const { ModuleFederationPlugin } = require('@rsbuild/core/plugins');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      },
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      }
    })
  ]
};

图像压缩

Rsbuild 支持图像压缩，可以通过配置来优化图像资源：

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: ['gifsicle', 'jpegtran', 'optipng', 'svgo']
      }
    })
  ]
};

典型生态项目

Rspack

Rspack 是一个基于 Rust 的快速 Web 打包工具，是 Rsbuild 的核心依赖。

Rspress

Rspress 是一个基于 Rsbuild 的快速静态站点生成器，适用于构建文档和博客。

Rsdoctor

Rsdoctor 是一个一站式构建分析器，用于 Rspack 和 webpack，帮助你诊断和优化构建过程。

Rslib

Rslib 是一个由 Rsbuild 驱动的库构建工具，专注于特定领域的能力开发。

通过以上教程，你可以快速上手 Rsbuild，并利用其强大的功能和生态系统来构建高性能的 Web 应用程序。