指南
API
指南
API

Rspack

Gez 是基于 Rspack 构建应用程序，同时也就继承了 Rspack 的全部优势。Gez 提供了一些 Rspack 的配置，你可以根据自己的情况来选择使用哪个。

TIP

你可以基于 @gez/rspack 的 createRspackHtmlApp 函数构建自己的 Vue、React、Preact、Solid、Svelte 等不同框架的配置。

@gez/rspack

提供了 Rspack 的基本配置。

安装依赖

如果你没有 @gez/rspack 的依赖，那么你可以通过如下命令安装。

npm
yarn
pnpm
bun
1npm install @gez/rspack -D

No Loader

createRspackApp 提供了 Gez 的必要配置，默认情况下不提供任何 loader 相关的配置，你还需要配置一些 loader 才能将项目跑起来。

DANGER

Gez 的默认配置不可修改，否则 Gez 无法正常工作，点击这里 了解默认配置。

选项

config() v3.0.0

  • 类型： config?: (context: RspackAppConfigContext) => void;
  • 默认值： undefined
  • 描述： 自定义 Rspack 配置。

例子

src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    async createDevApp(gez) {
5        return import('@gez/rspack').then((m) =>
6            m.createRspackApp(gez, {
7                config({ config }) {
8                    config.module = {
9                        ...config.module,
10                        rules: [
11                            {
12                                test: /\.ts$/,
13                                exclude: [/node_modules/],
14                                loader: 'builtin:swc-loader',
15                                options: {
16                                  jsc: {
17                                    parser: {
18                                      syntax: 'typescript',
19                                    },
20                                  },
21                                },
22                                type: 'javascript/auto',
23                              }
24                        ]
25                    }
26                }
27            })
28        );
29    }
30} satisfies GezOptions;

Html

createRspackHtmlApp 提供了一些开箱即用的配置，支持 Typescript、Worker、JSON、CSS、Less、Video、Image、Font 的相关文件。

选项

css v3.0.0

  • 类型： boolean
  • 默认值： true
  • 描述： 是否启用默认的 CSS 配置。
TIP

如果你要自定义 CSS loader，可以设置为 false。

swcLoader v3.0.0

  • 类型： SwcLoaderOptions
  • 默认值： undefined
  • 描述： 透传 builtin-swc-loader。

lessLoader v3.0.0

  • 类型： Record<string, any>;
  • 默认值： undefined
  • 描述： 透传 less-loader。

styleResourcesLoader v3.0.0

definePlugin v3.0.0

  • 类型： Record<string, any>;
  • 默认值： undefined
  • 描述： 透传 DefinePlugin。

target.web v3.0.0

  • 类型： string[]
  • 默认值： ['chrome>=87', 'firefox>=78', 'safari>=14', 'edge>=88']
  • 描述： 浏览器的构建目标。
WARNING

构建目标小于默认配置，Gez 可能无法正常工作。

target.node v3.0.0

  • 类型： string[]
  • 默认值： ['node>=20']
  • 描述： Node.js 的构建目标。
WARNING

构建目标小于默认配置，无法保证兼容性，请认真考虑后设置。

例子

src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    async createDevApp(gez) {
5        return import('@gez/rspack').then((m) =>
6            m.createRspackHtmlApp(gez, {
7                // 自定义选项
8                config({ config }) {
9                    // 自定义 Rspack 的配置
10                }
11            })
12        );
13    },
14} satisfies GezOptions;

@gez/rspack-vue

提供了 Rspack vue 的基本配置。

安装

如果你没有 @gez/rspack-vue 的依赖，那么你可以通过如下命令安装。

npm
yarn
pnpm
bun
1npm install @gez/rspack-vue -D
TIP

该软件包同时支持 Vue2 和 Vue3。

选项

选项继承于 createRspackHtmlApp。

vueLoader v3.0.0

  • 类型： Record<string, any>
  • 默认值： undefined
  • 描述： 透传 vue-loader
WARNING

experimentalInlineMatchResource 和 optimizeSSR 由程序自动设置，你传入也无效。

Vue2

createRspackVue2App 提供了 Vue2 的 .vue 文件支持。

src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    async createDevApp(gez) {
5        return import('@gez/rspack-vue').then((m) =>
6            m.createRspackVue2App(gez, {
7                config ({ config }) {
8                    // 自定义 Rspack 配置
9                }
10            })
11        );
12    }
13} satisfies GezOptions;

Vue3

createRspackVue3App 提供了 Vue3 的 .vue 文件的支持

src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    async createDevApp(gez) {
5        return import('@gez/rspack-vue').then((m) =>
6            m.createRspackVue3App(gez, {
7                config ({ config }) {
8                    // 自定义 Rspack 配置
9                }
10            })
11        );
12    }
13} satisfies GezOptions;

JSX/TSX

目前暂不支持 JSX/TSX ，如果你想要支持它。需要自行添加相关的 Rspack 配置。点击这里了解 Vue 的相关配置。