Skip to content

Commit 3729541

Browse files
renzp94renzp94
authored
Merge pull request #3 from renzp94/rspack
feat(rzpack): 添加rspack打包
2 parents 523e043 + 91491a6 commit 3729541

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+2169
-186
lines changed

‎.gitignore

+1-20
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,4 @@ package-lock.json
66
index.d.ts
77
.DS_Store
88
dist
9-
docs/.vitepress/cache/deps/_metadata.json
10-
docs/.vitepress/cache/deps/@theme_index.js
11-
docs/.vitepress/cache/deps/@theme_index.js.map
12-
docs/.vitepress/cache/deps/chunk-HWKKPLDN.js
13-
docs/.vitepress/cache/deps/chunk-HWKKPLDN.js.map
14-
docs/.vitepress/cache/deps/chunk-VDV77W7A.js
15-
docs/.vitepress/cache/deps/chunk-VDV77W7A.js.map
16-
docs/.vitepress/cache/deps/package.json
17-
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
18-
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
19-
docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
20-
docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
21-
docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js
22-
docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map
23-
docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js
24-
docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map
25-
docs/.vitepress/cache/deps/vitepress___minisearch.js
26-
docs/.vitepress/cache/deps/vitepress___minisearch.js.map
27-
docs/.vitepress/cache/deps/vue.js
28-
docs/.vitepress/cache/deps/vue.js.map
9+
docs/.vitepress/cache

‎README.md

+27-20
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
# rzpack
1414

1515
### 介绍
16-
`Rzpack`是一款基于`Webpack5`开发的React打包工具，通过`Webpack5`的`cache`、`lazyCompilation`特性及`esbuild`、`swc`等工具的配合，大大提高开发环境的启动速度，热更速度及打包速度，内置了许多功能，无需复杂的配置即可快速开发。同时配套的`create-rzpack`可以快速创建项目模板，省去项目框架搭建的时间。
16+
`Rzpack`是一款基于`Webpack5`/`Rspack`开发的React打包工具，通过`Webpack5`的`cache`、`lazyCompilation`特性及`esbuild`、`swc`等工具的配合，或者使用由`Rust`开发的`Rspack`，大大提高开发环境的启动速度，热更速度及打包速度，内置了许多功能，无需复杂的配置即可快速开发。同时配套的`create-rzpack`可以快速创建项目模板，省去项目框架搭建的时间。
1717

1818
### 环境配置
1919

@@ -141,27 +141,34 @@ pnpm create rzpack rzpack-app --template react-ts
141141

142142
### 配置
143143

144-
| 属性 | 说明 | 类型 | 默认 | 是否必填 |
145-
| ---------------- | -------------------------------------------------- | ------------------------------------------ | ---------------- | -------- |
146-
| antdTheme | antd主题变量设置 | `LessVars` | - | 非必填 |
147-
| lessVars | less全局变量设置 | `LessVars` | - | 非必填 |
148-
| assets | 资源文件处理 | `RzpackAssets` | - | 非必填 |
149-
| buildInfo | 是否在控制台打印编译信息 | `boolean\|BuildInfoWebpackPluginOptions` | - | 非必填 |
150-
| cache | 是否使用webpack5缓存 | boolean | true | 非必填 |
151-
| entry | 打包入口 | `string\|string[]\|Record<string, string>` | `./src/main.tsx` | 非必填 |
152-
| gzip | 是否启用gzip | boolean | - | 非必填 |
153-
| html | htmlPlugin插件设置(配置参考htmlWebpackPlugin插件) | `HtmlWebpackPlugin.Options` | - | 非必填 |
154-
| output | 输出目录 | `Output` | `dist` | 非必填 |
155-
| publicPath | 静态资源目录 | string | `public` | 非必填 |
156-
| server | 代理配置，当开启可视化配置时此处配置的接口代理无效 | `WebpackDevServerConfiguration` | - | 非必填 |
157-
| lazyCompilation | 实验性功能 | `LazyCompilationOptions` | - | 非必填 |
158-
| moduleFederation | 模块联邦 | `ModuleFederationPluginOptions` | - | 非必填 |
159-
| webpackChain | 使用webpackChain重写webpack配置 | `RzpackWebpackChain` | - | 非必填 |
160-
| proxyFile | 可视化配置的代理，仅在开启可视化配置时才生效 | string | - | 非必填 |
161-
| reactRefresh | 是否开启React代码热更新 | boolean | - | 非必填 |
162-
| million | 是否使用Million.js | `boolean\|MillionOptions` | - | 非必填 |
144+
| 属性 | 说明 | 类型 | 默认 | 是否必填 |
145+
| ---------------- | ----------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- | -------- |
146+
| builder | 打包器 | `BUILDER` | `BUILDER.WEBPACK` | 非必填 |
147+
| antdTheme | antd主题变量设置 | `LessVars` | - | 非必填 |
148+
| lessVars | less全局变量设置 | `LessVars` | - | 非必填 |
149+
| assets | 资源文件处理 | `RzpackAssets` | - | 非必填 |
150+
| buildInfo | 是否在控制台打印编译信息 | `boolean\|BuildInfoWebpackPluginOptions` | - | 非必填 |
151+
| cache | 是否使用持久化缓存(目前Webpack仅支持) | boolean | true | 非必填 |
152+
| entry | 打包入口 | `string\|string[]\|Record<string, string>` | `./src/main.tsx` | 非必填 |
153+
| gzip | 是否启用gzip | boolean | - | 非必填 |
154+
| html | htmlPlugin/HtmlRspackPlugin插件设置(配置参考htmlWebpackPlugin/HtmlRspackPlugin插件) | `HtmlWebpackPlugin.Options` | - | 非必填 |
155+
| output | 输出目录 | `Output` | `dist` | 非必填 |
156+
| publicPath | 静态资源目录 | string | `public` | 非必填 |
157+
| server | 代理配置，当开启可视化配置时此处配置的接口代理无效 | `WebpackDevServerConfiguration` | - | 非必填 |
158+
| lazyCompilation | 实验性功能 | `LazyCompilationOptions` | - | 非必填 |
159+
| moduleFederation | 模块联邦 | `ModuleFederationPluginOptions` | - | 非必填 |
160+
| webpackChain | 使用webpackChain重写webpack配置(0.2.x以下支持) | `RzpackWebpackChain` | - | 非必填 |
161+
| rzpackChain | 使用webpackChain重写webpack/rspack配置(0.3.x支持) | `RzpackWebpackChain` | - | 非必填 |
162+
| proxyFile | 可视化配置的代理，仅在开启可视化配置时才生效 | string | - | 非必填 |
163+
| reactRefresh | 是否开启React代码热更新 | boolean | - | 非必填 |
164+
| million | 是否使用Million.js | `boolean\|MillionOptions` | - | 非必填 |
163165

164166
```ts
167+
export enum BUILDER {
168+
WEBPACK = 'webpack',
169+
RSPACK = 'rspack',
170+
}
171+
165172
export interface LessVars {
166173
// 全局变量(直接定义的变量优先级高于变量文件)
167174
vars?: Record<string, string>

‎biome.json

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
{
2-
"$schema": "https://biomejs.dev/schemas/1.1.2/schema.json",
3-
"organizeImports": {
4-
"enabled": true
5-
},
6-
"linter": {
7-
"enabled": true,
2+
"files": {
83
"ignore": [
94
"index.d.ts",
105
"bin",
116
"dist",
127
"packages/create-rzpack/template-*/**",
138
"packages/ui/client",
14-
"scripts"
15-
],
9+
"scripts",
10+
"playground"
11+
]
12+
},
13+
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
14+
"organizeImports": {
15+
"enabled": true
16+
},
17+
"linter": {
18+
"enabled": true,
1619
"rules": {
1720
"recommended": true,
1821
"correctness": {
@@ -46,11 +49,6 @@
4649
"formatWithErrors": false,
4750
"indentStyle": "space",
4851
"indentWidth": 2,
49-
"lineWidth": 80,
50-
"ignore": [
51-
"packages/create-rzpack/template-*/**",
52-
"packages/ui/client",
53-
"dist"
54-
]
52+
"lineWidth": 80
5553
}
5654
}

‎docs/pages/configs.md

+16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
# 配置
22

3+
## builder 打包器
4+
5+
- 类型：`BUILDER`
6+
- 默认：`BUILDER.WEBPACK`
7+
8+
> 目前`Rspack`尚未达到生产可用状态，可以尝鲜，生产环境慎用。
9+
10+
```ts
11+
export enum BUILDER {
12+
WEBPACK = 'webpack',
13+
RSPACK = 'rspack',
14+
}
15+
```
16+
17+
设置打包器。
18+
319
## antdTheme 主题配置
420

521
- 类型：`LessVars`

‎docs/pages/guide/cli.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,16 @@ rzpack build [root]
4040

4141
#### 选项
4242

43-
| 属性 | 说明 | 类型 | 默认 |
44-
| ----------------------- | ------------------- | --------- | -------------------- |
45-
| --c | 指定配置文件 | `string` | `./vigour.config.ts` |
46-
| --config | 指定配置文件 | `string` | `./vigour.config.ts` |
47-
| --m | 指定webpack启动模式 | `string` | `development` |
48-
| --mode | 指定webpack启动模式 | `string` | `development` |
49-
| --outDir [dir] | 输出目录 | `string` | `dist` |
50-
| --bundle-size [boolean] | 分析打包资源大小 | `boolean` | - |
51-
| --bundle-time [boolean] | 分析打包时长 | `boolean` | - |
43+
| 属性 | 说明 | 类型 | 默认 | 版本 |
44+
| ----------------------- | -------------------------- | --------- | -------------------- | ----- |
45+
| --c | 指定配置文件 | `string` | `./vigour.config.ts` | 0.2.x |
46+
| --config | 指定配置文件 | `string` | `./vigour.config.ts` | 0.2.x |
47+
| --m | 指定webpack启动模式 | `string` | `development` | 0.2.x |
48+
| --mode | 指定webpack启动模式 | `string` | `development` | 0.2.x |
49+
| --outDir [dir] | 输出目录 | `string` | `dist` | 0.2.x |
50+
| --bundle-size [boolean] | 分析打包资源大小 | `boolean` | - | 0.2.x |
51+
| --bundle-time [boolean] | 分析打包时长(rspack不支持) | `boolean` | - | 0.2.x |
52+
| --doctor [boolean] | 可视化构建分析工具 | `boolean` | - | 0.3 |
5253

5354
## 预览
5455

‎docs/pages/guide/what-is.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# 什么是rzpack?
22

3-
`rzpack`是一款基于`Webpack5`开发的React打包工具，通过`Webpack5`的`cache`、`lazyCompilation`特性及`esbuild`、`swc`等工具的配合，大大提高开发环境的启动速度，热更速度及打包速度，内置了许多功能，无需复杂的配置即可快速开发。同时配套`create-rzpack`可以快速创建项目模板，省去项目框架搭建的时间。
3+
`Rzpack`是一款基于`Webpack5`/`Rspack`开发的React打包工具，通过`Webpack5`的`cache`、`lazyCompilation`特性及`esbuild`、`swc`等工具的配合，或者使用由`Rust`开发的`Rspack`，大大提高开发环境的启动速度，热更速度及打包速度，内置了许多功能，无需复杂的配置即可快速开发。同时配套的`create-rzpack`可以快速创建项目模板，省去项目框架搭建的时间。

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
"build": "pnpm prebuild && pnpm --parallel --filter=!./packages/rzpack-utils --filter=!./playground build",
1313
"playground:dev": "pnpm --filter=./playground dev",
1414
"playground:build": "pnpm --filter=./playground build",
15+
"playground:build:time": "pnpm --filter=./playground build:time",
16+
"playground:build:size": "pnpm --filter=./playground build:size",
17+
"playground:build:doctor": "pnpm --filter=./playground build:doctor",
1518
"playground:preview": "pnpm --filter=./playground preview",
1619
"prepare": "npx simple-git-hooks",
1720
"pub": "zx ./scripts/publish.mjs",
@@ -37,9 +40,6 @@
3740
"pre-commit": "npx lint-staged"
3841
},
3942
"lint-staged": {
40-
"packages/*/src/**/*.{js,ts}": [
41-
"biome check",
42-
"biome format --write"
43-
]
43+
"packages/*/src/**/*.{js,ts}": ["biome check", "biome format --write"]
4444
}
4545
}

‎packages/rzpack/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rzpack",
3-
"version": "0.2.7",
3+
"version": "0.3.0",
44
"description": "基于Webpack5封装的前端打包器",
55
"main": "./dist/index.js",
66
"types": "./dist/index.d.ts",
@@ -43,6 +43,10 @@
4343
"@renzp/css-scoped-loader": "^0.0.16",
4444
"@renzp/jsx-scoped-loader": "^0.0.24",
4545
"@renzp/unplugin-build-info": "^1.0.0",
46+
"@rsdoctor/rspack-plugin": "^0.2.4",
47+
"@rsdoctor/webpack-plugin": "^0.2.4",
48+
"@rspack/core": "^0.7.0",
49+
"@rspack/dev-server": "^0.7.0",
4650
"@soda/friendly-errors-webpack-plugin": "^1.8.1",
4751
"@svgr/webpack": "^6.5.1",
4852
"@swc/core": "1.3.32",

‎packages/rzpack/src/cli.ts

+38-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
#!/usr/bin/env node
22
import { cac } from 'cac'
33
import { fileExists, logError, pathResolve } from 'rzpack-utils'
4-
import type { BuildOptions, RzpackConfigs, ServerOptions } from '.'
5-
import { NAME, VERSION } from './constant'
4+
import {
5+
BUILDER,
6+
type BuildOptions,
7+
type RzpackConfigs,
8+
type ServerOptions,
9+
} from '.'
10+
import { DEFAULT_CONFIG, NAME, VERSION } from './constant'
611
import { RzpackContext } from './ctx'
12+
import { runRspackBuild, runRspackPreview, runRspackServer } from './rspack'
713
import { runWebpackBuild, runWebpackPreview, runWebpackServer } from './webpack'
814

915
export const rzpack = new RzpackContext()
@@ -27,11 +33,16 @@ cli
2733
.action(async (_: string, options: ServerOptions) => {
2834
const { c, m, mode, ui = true, config, host, port, open } = options ?? {}
2935
process.env.NODE_ENV = m ?? mode ?? 'development'
30-
rzpack.webpackChain.devServer.host(host).port(port).open(open)
36+
rzpack.chain.devServer.host(host).port(port).open(open)
3137
try {
3238
const configs: RzpackConfigs = rzpack.loadConfigFile(c ?? config)
3339
await rzpack.configs(configs)
34-
runWebpackServer(ui, configs?.proxyFile)
40+
const run =
41+
configs?.builder === BUILDER.WEBPACK
42+
? runWebpackServer
43+
: runRspackServer
44+
45+
run(ui, configs?.proxyFile)
3546
} catch (error) {
3647
logError(error)
3748
}
@@ -43,26 +54,33 @@ cli
4354
.option('--outDir <dir>', '[string] output directory (default: dist)')
4455
.option('--bundle-size', '[boolean] analysis package size')
4556
.option('--bundle-time', '[boolean] analyze packaging time')
57+
.option('--doctor', '[boolean] start Rsdoctor')
4658
.action(async (options: BuildOptions) => {
4759
const {
4860
c,
4961
m,
5062
mode,
5163
config,
52-
outDir = 'dist',
64+
outDir = DEFAULT_CONFIG.OUTPUT,
5365
bundleSize,
5466
bundleTime,
67+
doctor,
5568
} = options ?? {}
5669
process.env.NODE_ENV = m ?? mode ?? 'production'
5770
rzpack.bundleSize = bundleSize ?? false
5871
rzpack.bundleTime = bundleTime ?? false
72+
rzpack.doctor = doctor ?? false
73+
5974
try {
6075
const configs = rzpack.loadConfigFile(c ?? config)
6176
if (!configs?.output) {
6277
configs.output = outDir
6378
}
6479
await rzpack.configs(configs)
65-
runWebpackBuild(!rzpack.bundleTime)
80+
const run =
81+
configs?.builder === BUILDER.WEBPACK ? runWebpackBuild : runRspackBuild
82+
83+
run(!rzpack.bundleTime)
6684
} catch (error) {
6785
logError(error)
6886
}
@@ -73,7 +91,7 @@ cli
7391
.command('preview', 'preview for outDir')
7492
.option('--outDir <dir>', '[string] output directory (default: dist)')
7593
.action(async (options: BuildOptions) => {
76-
const { c, m, mode, config, outDir = 'dist' } = options ?? {}
94+
const { c, m, mode, config, outDir = DEFAULT_CONFIG.OUTPUT } = options ?? {}
7795
process.env.NODE_ENV = m ?? mode ?? 'production'
7896

7997
const configs = rzpack.loadConfigFile(c ?? config)
@@ -88,10 +106,21 @@ cli
88106
let isPreview: boolean = fileExists(fullPath)
89107
if (!isPreview) {
90108
await rzpack.configs(configs)
91-
isPreview = await runWebpackBuild(false)
109+
const runBuild =
110+
configs?.builder === BUILDER.WEBPACK ? runWebpackBuild : runRspackBuild
111+
112+
isPreview = await runBuild(false)
113+
}
114+
115+
if (configs?.builder === BUILDER.WEBPACK) {
116+
runWebpackPreview(dir)
92117
}
118+
const run =
119+
configs?.builder === BUILDER.WEBPACK
120+
? runWebpackPreview
121+
: runRspackPreview
93122

94-
runWebpackPreview(dir)
123+
run(dir)
95124
})
96125

97126
cli.help()

‎packages/rzpack/src/webpack/configs/alias.ts ‎packages/rzpack/src/common/configs/alias.ts

File renamed without changes.

‎packages/rzpack/src/webpack/configs/entry.ts ‎packages/rzpack/src/common/configs/entry.ts

+9-8
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ const getEntryKey = (entry: string) =>
66
entry
77
.split('/')
88
.pop()
9-
.replace('.tsx', '')
10-
.replace('.jsx', '')
11-
.replace('.ts', '')
12-
.replace('.js', '')
9+
?.replace('.tsx', '')
10+
?.replace('.jsx', '')
11+
?.replace('.ts', '')
12+
?.replace('.js', '')
13+
14+
const EntryDefaultKey = 'main'
1315

1416
export default (
1517
webpackChain: WebpackChain,
@@ -18,8 +20,7 @@ export default (
1820
if (entry) {
1921
switch (true) {
2022
case typeof entry === 'string': {
21-
// eslint-disable-next-line no-case-declarations
22-
const key = getEntryKey(entry as string)
23+
const key = getEntryKey(entry as string) ?? EntryDefaultKey
2324
webpackChain.entry(key).add(entry as string)
2425
break
2526
}
@@ -34,7 +35,7 @@ export default (
3435
)
3536
process.exit(-1)
3637
}
37-
const key = getEntryKey(item)
38+
const key = getEntryKey(item) ?? EntryDefaultKey
3839
return {
3940
[key]: item,
4041
}
@@ -53,6 +54,6 @@ export default (
5354
}
5455
}
5556
} else {
56-
webpackChain.entry('main').add(DEFAULT_CONFIG.ENTRY)
57+
webpackChain.entry(EntryDefaultKey).add(DEFAULT_CONFIG.ENTRY)
5758
}
5859
}

‎packages/rzpack/src/webpack/configs/extensions.ts ‎packages/rzpack/src/common/configs/extensions.ts

File renamed without changes.

‎packages/rzpack/src/webpack/configs/lazyCompilation.ts ‎packages/rzpack/src/common/configs/lazyCompilation.ts

File renamed without changes.

0 commit comments

Comments
 (0)