Merge pull request #3 from renzp94/rspack

feat(rzpack): 添加rspack打包

.gitignore

@@ -6,23 +6,4 @@ package-lock.json
 index.d.ts
 .DS_Store
 dist
-docs/.vitepress/cache/deps/_metadata.json
-docs/.vitepress/cache/deps/@theme_index.js
-docs/.vitepress/cache/deps/@theme_index.js.map
-docs/.vitepress/cache/deps/chunk-HWKKPLDN.js
-docs/.vitepress/cache/deps/chunk-HWKKPLDN.js.map
-docs/.vitepress/cache/deps/chunk-VDV77W7A.js
-docs/.vitepress/cache/deps/chunk-VDV77W7A.js.map
-docs/.vitepress/cache/deps/package.json
-docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
-docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
-docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
-docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
-docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js
-docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map
-docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js
-docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map
-docs/.vitepress/cache/deps/vitepress___minisearch.js
-docs/.vitepress/cache/deps/vitepress___minisearch.js.map
-docs/.vitepress/cache/deps/vue.js
-docs/.vitepress/cache/deps/vue.js.map
+docs/.vitepress/cache

README.md

@@ -13,7 +13,7 @@
 # rzpack
 
 ### 介绍
-  `Rzpack`是一款基于`Webpack5`开发的React打包工具，通过`Webpack5`的`cache`、`lazyCompilation`特性及`esbuild`、`swc`等工具的配合，大大提高开发环境的启动速度，热更速度及打包速度，内置了许多功能，无需复杂的配置即可快速开发。同时配套的`create-rzpack`可以快速创建项目模板，省去项目框架搭建的时间。
+  `Rzpack`是一款基于`Webpack5`/`Rspack`开发的React打包工具，通过`Webpack5`的`cache`、`lazyCompilation`特性及`esbuild`、`swc`等工具的配合，或者使用由`Rust`开发的`Rspack`，大大提高开发环境的启动速度，热更速度及打包速度，内置了许多功能，无需复杂的配置即可快速开发。同时配套的`create-rzpack`可以快速创建项目模板，省去项目框架搭建的时间。
 
 ### 环境配置
 
@@ -141,27 +141,34 @@ pnpm create rzpack rzpack-app --template react-ts
 
 ### 配置
 
-| 属性             | 说明                                               | 类型                                       | 默认             | 是否必填 |
-| ---------------- | -------------------------------------------------- | ------------------------------------------ | ---------------- | -------- |
-| antdTheme        | antd主题变量设置                                   | `LessVars`                                 | -                | 非必填   |
-| lessVars         | less全局变量设置                                   | `LessVars`                                 | -                | 非必填   |
-| assets           | 资源文件处理                                       | `RzpackAssets`                             | -                | 非必填   |
-| buildInfo        | 是否在控制台打印编译信息                           | `boolean\|BuildInfoWebpackPluginOptions`   | -                | 非必填   |
-| cache            | 是否使用webpack5缓存                               | boolean                                    | true             | 非必填   |
-| entry            | 打包入口                                           | `string\|string[]\|Record<string, string>` | `./src/main.tsx` | 非必填   |
-| gzip             | 是否启用gzip                                       | boolean                                    | -                | 非必填   |
-| html             | htmlPlugin插件设置(配置参考htmlWebpackPlugin插件)  | `HtmlWebpackPlugin.Options`                | -                | 非必填   |
-| output           | 输出目录                                           | `Output`                                   | `dist`           | 非必填   |
-| publicPath       | 静态资源目录                                       | string                                     | `public`         | 非必填   |
-| server           | 代理配置，当开启可视化配置时此处配置的接口代理无效 | `WebpackDevServerConfiguration`            | -                | 非必填   |
-| lazyCompilation  | 实验性功能                                         | `LazyCompilationOptions`                   | -                | 非必填   |
-| moduleFederation | 模块联邦                                           | `ModuleFederationPluginOptions`            | -                | 非必填   |
-| webpackChain     | 使用webpackChain重写webpack配置                    | `RzpackWebpackChain`                       | -                | 非必填   |
-| proxyFile        | 可视化配置的代理，仅在开启可视化配置时才生效       | string                                     | -                | 非必填   |
-| reactRefresh     | 是否开启React代码热更新                            | boolean                                    | -                | 非必填   |
-| million          | 是否使用Million.js                                 | `boolean\|MillionOptions`                  | -                | 非必填   |
+| 属性             | 说明                                                                                | 类型                                       | 默认              | 是否必填 |
+| ---------------- | ----------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- | -------- |
+| builder          | 打包器                                                                              | `BUILDER`                                  | `BUILDER.WEBPACK` | 非必填   |
+| antdTheme        | antd主题变量设置                                                                    | `LessVars`                                 | -                 | 非必填   |
+| lessVars         | less全局变量设置                                                                    | `LessVars`                                 | -                 | 非必填   |
+| assets           | 资源文件处理                                                                        | `RzpackAssets`                             | -                 | 非必填   |
+| buildInfo        | 是否在控制台打印编译信息                                                            | `boolean\|BuildInfoWebpackPluginOptions`   | -                 | 非必填   |
+| cache            | 是否使用持久化缓存(目前Webpack仅支持)                                               | boolean                                    | true              | 非必填   |
+| entry            | 打包入口                                                                            | `string\|string[]\|Record<string, string>` | `./src/main.tsx`  | 非必填   |
+| gzip             | 是否启用gzip                                                                        | boolean                                    | -                 | 非必填   |
+| html             | htmlPlugin/HtmlRspackPlugin插件设置(配置参考htmlWebpackPlugin/HtmlRspackPlugin插件) | `HtmlWebpackPlugin.Options`                | -                 | 非必填   |
+| output           | 输出目录                                                                            | `Output`                                   | `dist`            | 非必填   |
+| publicPath       | 静态资源目录                                                                        | string                                     | `public`          | 非必填   |
+| server           | 代理配置，当开启可视化配置时此处配置的接口代理无效                                  | `WebpackDevServerConfiguration`            | -                 | 非必填   |
+| lazyCompilation  | 实验性功能                                                                          | `LazyCompilationOptions`                   | -                 | 非必填   |
+| moduleFederation | 模块联邦                                                                            | `ModuleFederationPluginOptions`            | -                 | 非必填   |
+| webpackChain     | 使用webpackChain重写webpack配置(0.2.x以下支持)                                      | `RzpackWebpackChain`                       | -                 | 非必填   |
+| rzpackChain      | 使用webpackChain重写webpack/rspack配置(0.3.x支持)                                   | `RzpackWebpackChain`                       | -                 | 非必填   |
+| proxyFile        | 可视化配置的代理，仅在开启可视化配置时才生效                                        | string                                     | -                 | 非必填   |
+| reactRefresh     | 是否开启React代码热更新                                                             | boolean                                    | -                 | 非必填   |
+| million          | 是否使用Million.js                                                                  | `boolean\|MillionOptions`                  | -                 | 非必填   |
 
 ```ts
+export enum BUILDER {
+  WEBPACK = 'webpack',
+  RSPACK = 'rspack',
+}
+
 export interface LessVars {
   // 全局变量(直接定义的变量优先级高于变量文件)
   vars?: Record<string, string>

biome.json

@@ -1,18 +1,21 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.1.2/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
-  "linter": {
-    "enabled": true,
+  "files": {
     "ignore": [
       "index.d.ts",
       "bin",
       "dist",
       "packages/create-rzpack/template-*/**",
       "packages/ui/client",
-      "scripts"
-    ],
+      "scripts",
+      "playground"
+    ]
+  },
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
     "rules": {
       "recommended": true,
       "correctness": {
@@ -46,11 +49,6 @@
     "formatWithErrors": false,
     "indentStyle": "space",
     "indentWidth": 2,
-    "lineWidth": 80,
-    "ignore": [
-      "packages/create-rzpack/template-*/**",
-      "packages/ui/client",
-      "dist"
-    ]
+    "lineWidth": 80
   }
 }

docs/pages/configs.md

@@ -1,5 +1,21 @@
 # 配置
 
+## builder 打包器
+
+- 类型：`BUILDER`
+- 默认：`BUILDER.WEBPACK`
+
+> 目前`Rspack`尚未达到生产可用状态，可以尝鲜，生产环境慎用。
+
+```ts
+export enum BUILDER {
+  WEBPACK = 'webpack',
+  RSPACK = 'rspack',
+}
+```
+
+设置打包器。
+
 ## antdTheme 主题配置
 
 - 类型：`LessVars`

docs/pages/guide/cli.md

@@ -40,15 +40,16 @@ rzpack build [root]
 
 #### 选项
 
-| 属性                    | 说明                | 类型      | 默认                 |
-| ----------------------- | ------------------- | --------- | -------------------- |
-| --c                     | 指定配置文件        | `string`  | `./vigour.config.ts` |
-| --config                | 指定配置文件        | `string`  | `./vigour.config.ts` |
-| --m                     | 指定webpack启动模式 | `string`  | `development`        |
-| --mode                  | 指定webpack启动模式 | `string`  | `development`        |
-| --outDir [dir]          | 输出目录            | `string`  | `dist`               |
-| --bundle-size [boolean] | 分析打包资源大小    | `boolean` | -                    |
-| --bundle-time [boolean] | 分析打包时长        | `boolean` | -                    |
+| 属性                    | 说明                       | 类型      | 默认                 | 版本  |
+| ----------------------- | -------------------------- | --------- | -------------------- | ----- |
+| --c                     | 指定配置文件               | `string`  | `./vigour.config.ts` | 0.2.x |
+| --config                | 指定配置文件               | `string`  | `./vigour.config.ts` | 0.2.x |
+| --m                     | 指定webpack启动模式        | `string`  | `development`        | 0.2.x |
+| --mode                  | 指定webpack启动模式        | `string`  | `development`        | 0.2.x |
+| --outDir [dir]          | 输出目录                   | `string`  | `dist`               | 0.2.x |
+| --bundle-size [boolean] | 分析打包资源大小           | `boolean` | -                    | 0.2.x |
+| --bundle-time [boolean] | 分析打包时长(rspack不支持) | `boolean` | -                    | 0.2.x |
+| --doctor [boolean]      | 可视化构建分析工具         | `boolean` | -                    | 0.3   |
 
 ## 预览
 

docs/pages/guide/what-is.md

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

package.json

@@ -12,6 +12,9 @@
     "build": "pnpm prebuild && pnpm --parallel --filter=!./packages/rzpack-utils --filter=!./playground build",
     "playground:dev": "pnpm --filter=./playground dev",
     "playground:build": "pnpm --filter=./playground build",
+    "playground:build:time": "pnpm --filter=./playground build:time",
+    "playground:build:size": "pnpm --filter=./playground build:size",
+    "playground:build:doctor": "pnpm --filter=./playground build:doctor",
     "playground:preview": "pnpm --filter=./playground preview",
     "prepare": "npx simple-git-hooks",
     "pub": "zx ./scripts/publish.mjs",
@@ -37,9 +40,6 @@
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
-    "packages/*/src/**/*.{js,ts}": [
-      "biome check",
-      "biome format --write"
-    ]
+    "packages/*/src/**/*.{js,ts}": ["biome check", "biome format --write"]
   }
 }

packages/rzpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rzpack",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "基于Webpack5封装的前端打包器",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,6 +43,10 @@
     "@renzp/css-scoped-loader": "^0.0.16",
     "@renzp/jsx-scoped-loader": "^0.0.24",
     "@renzp/unplugin-build-info": "^1.0.0",
+    "@rsdoctor/rspack-plugin": "^0.2.4",
+    "@rsdoctor/webpack-plugin": "^0.2.4",
+    "@rspack/core": "^0.7.0",
+    "@rspack/dev-server": "^0.7.0",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@svgr/webpack": "^6.5.1",
     "@swc/core": "1.3.32",

packages/rzpack/src/cli.ts

@@ -1,9 +1,15 @@
 #!/usr/bin/env node
 import { cac } from 'cac'
 import { fileExists, logError, pathResolve } from 'rzpack-utils'
-import type { BuildOptions, RzpackConfigs, ServerOptions } from '.'
-import { NAME, VERSION } from './constant'
+import {
+  BUILDER,
+  type BuildOptions,
+  type RzpackConfigs,
+  type ServerOptions,
+} from '.'
+import { DEFAULT_CONFIG, NAME, VERSION } from './constant'
 import { RzpackContext } from './ctx'
+import { runRspackBuild, runRspackPreview, runRspackServer } from './rspack'
 import { runWebpackBuild, runWebpackPreview, runWebpackServer } from './webpack'
 
 export const rzpack = new RzpackContext()
@@ -27,11 +33,16 @@ cli
   .action(async (_: string, options: ServerOptions) => {
     const { c, m, mode, ui = true, config, host, port, open } = options ?? {}
     process.env.NODE_ENV = m ?? mode ?? 'development'
-    rzpack.webpackChain.devServer.host(host).port(port).open(open)
+    rzpack.chain.devServer.host(host).port(port).open(open)
     try {
       const configs: RzpackConfigs = rzpack.loadConfigFile(c ?? config)
       await rzpack.configs(configs)
-      runWebpackServer(ui, configs?.proxyFile)
+      const run =
+        configs?.builder === BUILDER.WEBPACK
+          ? runWebpackServer
+          : runRspackServer
+
+      run(ui, configs?.proxyFile)
     } catch (error) {
       logError(error)
     }
@@ -43,26 +54,33 @@ cli
   .option('--outDir <dir>', '[string] output directory (default: dist)')
   .option('--bundle-size', '[boolean] analysis package size')
   .option('--bundle-time', '[boolean] analyze packaging time')
+  .option('--doctor', '[boolean] start Rsdoctor')
   .action(async (options: BuildOptions) => {
     const {
       c,
       m,
       mode,
       config,
-      outDir = 'dist',
+      outDir = DEFAULT_CONFIG.OUTPUT,
       bundleSize,
       bundleTime,
+      doctor,
     } = options ?? {}
     process.env.NODE_ENV = m ?? mode ?? 'production'
     rzpack.bundleSize = bundleSize ?? false
     rzpack.bundleTime = bundleTime ?? false
+    rzpack.doctor = doctor ?? false
+
     try {
       const configs = rzpack.loadConfigFile(c ?? config)
       if (!configs?.output) {
         configs.output = outDir
       }
       await rzpack.configs(configs)
-      runWebpackBuild(!rzpack.bundleTime)
+      const run =
+        configs?.builder === BUILDER.WEBPACK ? runWebpackBuild : runRspackBuild
+
+      run(!rzpack.bundleTime)
     } catch (error) {
       logError(error)
     }
@@ -73,7 +91,7 @@ cli
   .command('preview', 'preview for outDir')
   .option('--outDir <dir>', '[string] output directory (default: dist)')
   .action(async (options: BuildOptions) => {
-    const { c, m, mode, config, outDir = 'dist' } = options ?? {}
+    const { c, m, mode, config, outDir = DEFAULT_CONFIG.OUTPUT } = options ?? {}
     process.env.NODE_ENV = m ?? mode ?? 'production'
 
     const configs = rzpack.loadConfigFile(c ?? config)
@@ -88,10 +106,21 @@ cli
     let isPreview: boolean = fileExists(fullPath)
     if (!isPreview) {
       await rzpack.configs(configs)
-      isPreview = await runWebpackBuild(false)
+      const runBuild =
+        configs?.builder === BUILDER.WEBPACK ? runWebpackBuild : runRspackBuild
+
+      isPreview = await runBuild(false)
+    }
+
+    if (configs?.builder === BUILDER.WEBPACK) {
+      runWebpackPreview(dir)
     }
+    const run =
+      configs?.builder === BUILDER.WEBPACK
+        ? runWebpackPreview
+        : runRspackPreview
 
-    runWebpackPreview(dir)
+    run(dir)
   })
 
 cli.help()

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

@@ -6,10 +6,12 @@ const getEntryKey = (entry: string) =>
   entry
     .split('/')
     .pop()
-    .replace('.tsx', '')
-    .replace('.jsx', '')
-    .replace('.ts', '')
-    .replace('.js', '')
+    ?.replace('.tsx', '')
+    ?.replace('.jsx', '')
+    ?.replace('.ts', '')
+    ?.replace('.js', '')
+
+const EntryDefaultKey = 'main'
 
 export default (
   webpackChain: WebpackChain,
@@ -18,8 +20,7 @@ export default (
   if (entry) {
     switch (true) {
       case typeof entry === 'string': {
-        // eslint-disable-next-line no-case-declarations
-        const key = getEntryKey(entry as string)
+        const key = getEntryKey(entry as string) ?? EntryDefaultKey
         webpackChain.entry(key).add(entry as string)
         break
       }
@@ -34,7 +35,7 @@ export default (
             )
             process.exit(-1)
           }
-          const key = getEntryKey(item)
+          const key = getEntryKey(item) ?? EntryDefaultKey
           return {
             [key]: item,
           }
@@ -53,6 +54,6 @@ export default (
       }
     }
   } else {
-    webpackChain.entry('main').add(DEFAULT_CONFIG.ENTRY)
+    webpackChain.entry(EntryDefaultKey).add(DEFAULT_CONFIG.ENTRY)
   }
 }