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

背景说明

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

关于构建工具

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

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

补充

项目结构

话不多说,看看我的项目组成:

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

使用 Rspack

js 复制代码
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
})
js 复制代码
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

js 复制代码
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`
        }
    }
})
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 文件内样式失效,已反馈给官方团队,后者正在修复 👍
相关推荐
然我12 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子17 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB241 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
yezipi耶不耶10 小时前
Rust入门之并发编程基础(三)
rust
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript