背景说明
我现在做新项目,喜欢前后端都用 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-uiserver
:后端服务,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()] })
]
}
}
})
问题记录
- rsbuild 1.0.3(2024-09-11发布),使用
unplugin-auto-import
插件时,会导致 SFC 文件内样式失效,已反馈给官方团队,后者正在修复 👍