指南
指南

快速开始

这是一个与框架无关的例子，采用原生的 HTML 来开发项目

TIP

Gez 默认支持 SSR，但是你可以当成 CSR 来使用。

创建项目

cd 项目目录
npm init

将项目设置为 module

在 package.json 文件添加

{
    "type": "module"
}

安装依赖

TIP

总是应该将生产依赖和开发依赖区分，会使 node_modules 在生产环境中更小。

安装生产依赖

npm
yarn
pnpm
bun
npm install @gez/core

安装开发依赖

npm
yarn
pnpm
bun
npm install @gez/rspack typescript @types/node -D

添加脚本

在 package.json 文件添加

{
    "scripts": {
        "dev": "gez dev",
        "build": "npm run build:ssr && npm run build:dts && npm run release",
        "build:ssr": "gez build",
        "build:dts": "tsc --noEmit --outDir dist/server/src",
        "release": "gez release",
        "preview": "gez preview",
        "start": "gez start",
        "postinstall": "gez install"
    }
}
TIP

你需要手动配置 tsconfig.json 文件，否则执行 build:dts 命令会报错。

入口文件

基本结构

- src/ - entry.client.ts # 客户端程序入口，一般会处理水合 - entry.server.ts # 使用框架的 SSR API 渲染出 HTML 内容 - entry.node.ts # 创建一个服务器程序，来处理请求

src/entry.client.ts

模拟水合，更新当前时间

const time = document.querySelector('time');
setInterval(() => {
    time?.setHTMLUnsafe(new Date().toISOString());
}, 1000);

src/entry.server.ts

模拟框架的 SSR API，渲染出 HTML 内容返回

// 这里必须使用 import type，否则开发阶段会报错
import type { RenderContext } from '@gez/core';

export default async (rc: RenderContext) => {
    // 获取注入的代码
    const script = await rc.script();
    const time = new Date().toISOString();
    rc.html = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gez</title>
</head>
<body>
    <h1>Gez</h1>
    <h2>Hello world!</h2>
    <p>URL: ${rc.params.url}</p>
    <time>${time}</time>
    ${script}
</body>
</html>
`;
};

src/entry.node.ts

创建一个 web 服务器，来处理客户请求

import http from 'node:http';
import type { GezOptions } from '@gez/core';
import { name } from '../package.json';

export default {
    // 设置应用的唯一名字，如果有多个项目，则名字不能重复
    name,
    // 本地执行 dev 和 build 时会使用
    async createDevApp(gez) {
        return import('@gez/rspack').then((m) =>
            m.createApp(gez, (buildContext) => {
                // 可以在这里修改 Rspack 编译的配置
            })
        );
    },
    async createServer(gez) {
        const server = http.createServer((req, res) => {
            // 静态文件处理
            gez.middleware(req, res, async () => {
                // 传入渲染的参数
                const ctx = await gez.render({
                    params: {
                        url: req.url
                    }
                });
                // 响应 HTML 内容
                res.end(ctx.html);
            });
        });
        // 监听端口
        server.listen(3000, () => {
            console.log('http://localhost:3000');
        });
    }
} satisfies GezOptions;

启动项目

npm run dev

浏览器打开：http://localhost:3000

更多例子

TIP

如果你使用了 Gez，欢迎提交 PR，在这里提供更多的例子。