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 它真的很快。希望以后会更加繁荣，稳定。