快来用 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 } = require('unplugin-vue-components/resolvers')

const pkg = require("./package.json")

const resolve = dir=> join(__dirname, dir)

module.exports = defineConfig({
    context: __dirname,
    entry: './src/main.js',
    devtool: false,
    devServer:{
        port: 10000,
        host: "localhost"
    },
    resolve:{
        extensions:[".js",".vue",".json",".css"],
        alias:{
            "@"                     : resolve("src")
        }
    },
    performance:{
        hints: 'error',
        maxAssetSize: 5*1024*1024,
        maxEntrypointSize: 5*1024*1024,
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlRspackPlugin({
            template: "./index.html"
        }),
        new DefinePlugin({
        	//关闭 vue3 的警告信息
            "__VUE_OPTIONS_API__": true,
            "__VUE_PROD_DEVTOOLS__": false,
            "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
        }),
        new EnvironmentPlugin({
            "VERSION"           : pkg.version,
            "AUTHOR"            : pkg.author
        }),
        require('unplugin-auto-import/rspack').default({ imports:['vue', 'vue-router'], dts: false }),
        //按需导入 naive-ui
        require('unplugin-vue-components/rspack').default({
            resolvers: [NaiveUiResolver()]
        })
    ],
    experiments:{
        css: true
    },
    module:{
        rules:[
            { test: /\.vue$/, loader: "vue-loader", options: { experimentalInlineMatchResource: true }},
            { test: /\.(txt|svg)/, type: "asset/resource" },
            { test: /\.md/, type: 'asset/source' }
        ]
    }
})

使用 Rsbuild

import { readFileSync } from 'node:fs'
import { defineConfig } from '@rsbuild/core'

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

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

import { defineConfig } from "@rsbuild/core"
import { pluginVue } from "@rsbuild/plugin-vue"

import AutoImport from 'unplugin-auto-import/rspack'
import Components from 'unplugin-vue-components/rspack'
import { NaiveUiResolver } from "unplugin-vue-components/resolvers"

import pkg from './package.json'

export default defineConfig({
    source:{
        entry: {index:"./src/main.js"},
        alias:{
            "@"         : "./src"
        },
        define:{
            "APP_TITLE"         : JSON.stringify(pkg.cnName)
        }
    },
    html:{
        template: "./index.html",
        templateParameters:{
            "APP_TITLE"     : pkg.cnName
        }
    },
    server:{
        port: 10000,
        host: "localhost"
    },
    output:{
        distPath:{
            js:"js",
            css:"css"
        },
        legalComments: 'none'
    },
    plugins:[
        pluginVue()
    ],
    tools:{
        rspack:{
            plugins: [
                AutoImport({
                    include: [/\.[tj]sx?$/,/\.vue$/,/\.vue\?vue/],
                    imports:['vue', 'vue-router'],
                    dts: false
                }),
                //按需导入 naive-ui
                Components({ resolvers: [NaiveUiResolver()] })
            ]
        }
    }
})

问题记录

1. rsbuild 1.0.3（2024-09-11发布），使用 unplugin-auto-import 插件时，会导致 SFC 文件内样式失效，已反馈给官方团队，后者正在修复 👍