快来用 Rspack/Rsbuild + pnpm 构建你的 monorepo 全栈项目

背景说明

我现在做新项目，喜欢前后端都用 JavaScript，代码都放在一个目录下（monorepo 代码管理模式），并使用 pnpm 管理😄。构建工具也从 webpack、vite 切换到 Rspack / Rsbuild。

关于构建工具

我是从 webpack 的时代过来的，并对它情有独钟，哪怕后面 vite 异军突起，用的最多的还是 webpack，一个很重要的原因就是它全面，前端 WEB、后端 SERVER、库 Library、WASM 均能胜任。虽然 vite 速度快，但在打包后端、库时差强人意（至少在我的实践中如此）。直至遇见 Rspack，兼容 webpack，速度还飞快，在这个急躁的年代谁能不爱😀。

再来张官方的性能对比图：

测试机器：MacBook Pro / Apple M1 Pro / 32GB

补充

• 关monorepo 是一种项目代码管理方式，可以看我之前的一篇博文：内网 monorepo 配置指南（PNPM、YARN、Rush.js）

项目结构

话不多说，看看我的项目组成：

• web：前端项目，vue3 + naive-ui
• server：后端服务，fastify + sqlite3， ESM 项目

使用 Rspack

import {
    readFileSync } from 'node:fs'
import {
    defineConfig } from "@rspack/cli"

const pkg = JSON.parse(readFileSync("./package.json"))

export default defineConfig({
   
    entry: './src/index.js',
    output:{
   
        filename: `${
     pkg.name}.js`
    },
    target: 'node',
    devtool: false
})

const {
    join } = require('node:path')

const {
    defineConfig } = require("@rspack/cli")
const {
    HtmlRspackPlugin, DefinePlugin, EnvironmentPlugin, experiments } = require('@rspack/core')

const {
    VueLoaderPlugin } = require('vue-loader')
const {
    NaiveUiResolver }