Rsbuild 使用教程
项目地址:https://gitcode.com/gh_mirrors/rs/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 应用程序。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考