快来用 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 文件内样式失效,已反馈给官方团队,后者正在修复 👍
相关推荐
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖3 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬3 小时前
Promise 的场景和最佳实践
前端·javascript
Asort3 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio3 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly3 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果3 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特4 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
一枚前端小能手4 小时前
「周更第3期」实用JS库推荐:Lodash
前端·javascript