rsbuild 搭建 vue3 项目模版
直接上代码 rsbuild-vue3
介绍
2024-08-28 Rspack 1.0 正式发布了，Rspack 是基于 Rust 编写的下一代 JavaScript 打包工具， 兼容 webpack 的 API 和生态，并提供 10 倍于 webpack 的构建性能。Rsbuild 是由 Rspack 驱动的构建工具。
简单来说 Rsbuild 就是让你用和 webpack 差不多的配置，更快的构建项目。它是字节推出的产品，说是内部的很多前端项目已经迁移到 Rspack。
使用 Rsbuild 构建项目
下面跟着官方的案例，使用 Rsbuild 快速创建一个项目
pnpm create rsbuild@latest
选择你熟悉的框架模版，比如 vue3。安装依赖之后运行 pnpm dev, 跑不起来了。
是的，你没有看错！官方给的模版不是开箱即用的，因为你没有配置 mode，想一想 webpack 的 config 你就会知道怎么回事了。
修改 rsbuild.config.mjs 文件, 新增 mode 配置。
export default defineConfig({
mode: 'development'
})
现在运行项目，可以运行起来了。
打造通用的 vue3 项目模版
构建前端项目框架的时候，经常接触的问题包括：开发模式配置、生产打包配置、环境变量设置、各种库和依赖、打包优化等等。
这些问题都可以从官方的目录指南找到答案，但是也许你不是 webpack 或者 vite 的熟练使用者。那么你可以直接查看我的项目 rsbuild-vue3。
查看一个项目最快的方式，就是直接看 package.json 文件。
不难看出项目的一些依赖，包括：vue,vue-router,pinia,sass,element-plus,unoss,lint-staged,biome 等。
这些都是我根据以往的经验添加的一些依赖，当然你也可以自己添加一些，比如说 axios，这很简单，你完全可以轻松解决。
下载项目，安装依赖，运行 npm run start:dev, 如果运行成功，你会看到如下内容：
样式有点丑，不过我们更在意的是功能。这里展示了 unocss, vue-router，pinia, vue-jsx 组件的使用。点击按钮触发 store 里面的 count++，点击 Go to About 触发 router-link 的页面跳转。很简单，你直接看源码的 src/app.vue 就行。
查看项目目录：
- dist: 项目打包输出的文件夹
- envConfig: 环境变量配置
- public: 公共文件，目前存放着 index.html 模版，后面在配置文件会用到
- src/components: 公共组件目录，可以被 unplugin-vue-components 自动加载
- src/pages: 路由页面
- src/router: 路由配置
- src/store: pinia store 的配置
- styles: 样式文件
- /element/index: element plus 自定义主题颜色的配置
- /common: 公共样式
- index.js: 入口文件
- uno.css: unocss 样式文件
- .biomelintrc-auto-import.json: unplugin-auto-import 生成的文件，防止 biome 校验不通过
- biome.json: 帮助我们完成代码格式化与规则校验,相当于 prettier 与 eslint 的集合，具体可以查看我的文章 前端工具库-biome
- package.json: ...
- postcss.config.mjs: postcss 配置，主要是使用 Unocss
- rsbuild.config.mjs: rsbuild 配置文件，很重要，类似于 vite.config.js
- uno.config.js: Unocss 配置，使用了 presetWind 预设，兼容 tailwind css 的语法
unplugin-auto-import，unplugin-vue-components 还没有接触过的朋友，可以去查看我的文章，使用vite搭建vue3项目,里面有相关使用说明。
unplugin 是一个适用于不同构建工具的统一插件系统, 查看 github 你可以发现它们适用于 webpack、vite、rsbuild 不同构建工具的文档。
具体配置分析
import { defineConfig } from '@rsbuild/core';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
import { pluginSass } from '@rsbuild/plugin-sass';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx';
import AutoImport from 'unplugin-auto-import/rspack';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import AutoComponents from 'unplugin-vue-components/rspack';
console.log('BASE_URL:', import.meta.env.BASE_URL);
export default defineConfig(({ env, command, envMode }) => {
console.log('env:', env);
console.log('command:', command);
console.log('envMode:', envMode);
return {
// root: './foo', 指定项目根目录， 默认为 process.cwd()
// mode 本项目通过 process.env.NODE_ENV 设置
plugins: [
// Vue 的 JSX 插件依赖 Babel 进行编译
pluginBabel({
include: /\.(?:jsx|tsx)$/,
}),
pluginVue(),
pluginVueJsx(), // 支持 jsx 语法
pluginSass(), // 支持 sass 语法
pluginImageCompress(), // 使用图片压缩
],
tools: {
rspack: {
plugins: [
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: 'scss',
}),
],
dts: false,
imports: ['vue', 'vue-router', 'pinia'],
biomelintrc: {
// 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成
enabled: false,
// 生成文件地址和名称
filepath: './.biomelintrc-auto-import.json', // Default `./.biomelintrc-auto-import.json`
},
}),
AutoComponents({
// 自动加载组件的目录配置,默认的为 'src/components'
dirs: ['src/components'],
// 组件支持的文件后缀名
extensions: ['vue', 'jsx', 'tsx'],
dts: false,
resolvers: [
ElementPlusResolver({
importStyle: 'scss',
}),
],
}),
],
},
},
source: {
entry: {
index: './src/index.js',
},
// 路径别名
alias: {
'@': './src',
},
},
output: {
target: 'web', // 默认 environment
polyfill: 'off', // 不需要兼容 IE 11
minify: true, // 默认在生产模式下压缩 js css
cleanDistPath: env === 'production',
// sourceMap: 使用默认配置,
},
dev: {
lazyCompilation: true, // 开发模式启动，按需编译
hmr: true, // 模块热更新,开发模式下默认启用
},
server: {
open: true,
port: 3002,
htmlFallback: 'index', // 默认情况下，当请求满足以下条件且未找到对应资源时，会回退到 index.html
proxy: {
'/api': 'http://localhost:3000',
},
},
html: {
// 设置页面 title
title: 'Rsbuild Vue3',
template: './public/index.html',
},
performance: {
// 代码分割配置
chunkSplit: {
strategy: 'split-by-experience',
// strategy: 'split-by-size',
// minSize: 30000,
// maxSize: 500000,
},
removeConsole: true, // 生产模式构建时，是否自动移除代码中所有的 console.[methodName]
bundleAnalyze: {}, // 开启分析产物体积，生成 ./dist/report-web.html 文件
},
};
});
上面是 rsbuild.config.mjs 的内容，这些官网都可以找到，我也是查找指南和配置一步步来修改的。中文文档很好，点赞！不多说，直接看备注，找官网和谷歌，很容易明白。项目基本上已经包含了日常使用的功能，简单修改一下就好。
之前我用 vite 打造了 vue3 的项目模版，它的打包速度大约是 8s 多。现在使用 rsbuild, 打包只要 1s 多。我使用的是 m2 pro 的 mac book pro 16寸，rsbuild 它真的很快。希望以后会更加繁荣，稳定。
