@modern-js/main-doc 2.60.5 → 2.61.0

package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx

@@ -1,6 +1,3 @@
----
-title: useRuntimeContext
----
 # useRuntimeContext
 
 该函数主要用于获取 Runtime 上下文，只能在函数组件中使用。
@@ -12,7 +9,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
 
 export function App() {
   const runtimeContext = useRuntimeContext();
-  return <div>Hello World</div>;
+  return <div>Hello World</div>
 }
 ```
 
@@ -20,44 +17,100 @@ export function App() {
 
 ```ts
 type RuntimeContext = {
-  request: {
-    params: Record<string, string>;
-    pathname: string;
-    query: Record<string, string>;
-    headers: IncomingHttpHeaders;
-    cookie: string;
-  };
-  store: ReduckStore;
-  router: RemixRouter;
+  context: RequestContext;
 };
-
-function useRuntimeContext(): RuntimeContext;
 ```
 
-### 返回值
+### context
 
-- `request`：请求上下文中的附加信息。
-  - `params`：请求路径中的动态参数。
-  - `pathname`：请求的 pathname。
-  - `query`：请求的查询字符串对象。
-  - `headers`：请求头信息。
-  - `cookie`：请求的 cookie 信息。
-- `store`：在开启了 state 插件的时候，该值为 Reduck 全局 `store`。
-- `router`：在开启 router 插件的时候存在。
-  - `location`：当前路由对应的位置信息。同 [`useLocation`](/apis/app/runtime/router/router.html#uselocation) 返回值。
-  - `navigate`：导航到给定路径。同 [`useNavigate`](/apis/app/runtime/router/router.html#usenavigate) 返回值。
+用于获取[请求上下文](#请求上下文)。
 
-## 示例
+## 使用示例
 
-```tsx
-import { useRuntimeContext } from '@modern-js/runtime';
-import { fooModel } from '@/common/models';
+### 区分运行环境
 
+```ts
 function App() {
-  const { store } = useRuntimeContext();
+  const { context } = useRuntimeContext();
+
+  if (context.isBrowser === true) {
+    // 浏览器端执行逻辑
+    console.log('browser render')
+  } else {
+    // 服务器端执行逻辑 logger 功能需开启
+    context.logger.info('server render')
+  }
+}
+```
+
+### 请求上下文
+
+开启 SSR 时，在 Node 环境和浏览器端环境可以获取到同构的请求上下文。
+
+稍有不同的是 Node 环境还支持设置响应头、响应码，并提供了 Logger 日志与 Metrics 打点。
+
+:::tip
+当 SSR 未开启时，仅包含可在浏览器端获取的部分信息。
+
+:::
+
+import { Tabs, Tab as TabItem } from "@theme";
+
+<Tabs
+  defaultValue="RequestContext"
+  values={[
+    { label: 'RequestContext', value: 'RequestContext', },
+    { label: 'ServerContext', value: 'ServerContext', },
+    { label: 'ClientContext', value: 'ClientContext', },
+  ]
+}>
+<TabItem value="RequestContext">
 
-  const [state, actions] = store.use(fooModel);
+```ts
+type RequestContext = ServerContext | ClientContext;
+```
+
+</TabItem>
+<TabItem value="ServerContext">
 
-  return <div>state: {state}</div>;
+```ts
+interface ServerContext {
+  isBrowser: false;
+  request: {
+    userAgent: string;
+    cookie: string;
+    cookieMap: Record<string, any>;
+    query: Record<string, any>;
+    url: string;
+    host: string;
+    headers?: IncomingHttpHeaders;
+  };
+  response: {
+    setHeader: (key: string, value: string) => void;
+    status: (code: number) => void;
+  };
+  logger: Logger;
+  metrics: Metrics;
 }
 ```
+
+</TabItem>
+<TabItem value="ClientContext">
+
+```ts
+interface ClientContext {
+  isBrowser: true;
+  request: {
+    userAgent: string;
+    cookie: string;
+    cookieMap: Record<string, any>;
+    query: Record<string, any>;
+    url: string;
+    host: string;
+    headers?: IncomingHttpHeaders;
+  };
+}
+```
+
+</TabItem>
+</Tabs>

package/docs/zh/components/bff-upload.mdx

@@ -0,0 +1,97 @@
+BFF 搭配运行时框架提供了文件上传能力，支持一体化调用及纯函数手动调用。
+
+### BFF 函数
+
+首先创建 `api/lambda/upload.ts` 文件：
+
+```ts title="api/lambda/upload.ts"
+export const post = async ({ formData }: {formData: Record<string, any>}) => {
+  console.info('formData:', formData);
+  // do somethings
+  return {
+    data: {
+      code: 0,
+    },
+  };
+};
+```
+:::tip
+通过接口处理函数入参中的 `formData` 可以获取客户端上传的文件。值为 `Object`，key 为上传时的字段名。
+:::
+
+### 一体化调用
+
+接着在 `src/routes/upload/page.tsx` 中直接引入函数并调用：
+```tsx title="routes/upload/page.tsx"
+import { post } from '@api/upload';
+import React from 'react';
+
+export default (): JSX.Element => {
+  const [file, setFile] = React.useState<FileList | null>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData();
+    if (file) {
+      for (let i = 0; i < file.length; i++) {
+        formData.append('images', file[i]);
+      }
+      post({
+        formData,
+      });
+    }
+  };
+
+  return (
+    <div>
+      <input multiple type="file" onChange={handleChange} />
+      <button onClick={handleUpload}>upload</button>
+    </div>
+  );
+};
+```
+:::tip
+注意：入参类型必须为：`{ formData: FormData }` 才会正确上传。
+
+:::
+
+### 手动上传
+可以基于 `fetch API` 手动上传文件，需要在调用 `fetch` 时，将 `body` 设置为 `FormData` 类型并提交 `post` 请求。
+
+```tsx title="routes/upload/page.tsx"
+import React from 'react';
+
+export default (): JSX.Element => {
+  const [file, setFile] = React.useState<FileList | null>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData();
+    if (file) {
+      for (let i = 0; i < file.length; i++) {
+        formData.append('images', file[i]);
+      }
+      await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input multiple type="file" onChange={handleChange} />
+      <button type="submit">upload</button>
+    </form>
+  );
+};
+
+```

package/docs/zh/components/default-mwa-generate.mdx

@@ -1,5 +1,4 @@
 ```bash
-? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm
 ```

package/docs/zh/components/init-app.mdx

@@ -1,7 +1,6 @@
 `@modern-js/create` 会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
 
 ```bash
-? 请选择你想创建的工程类型 Web 应用
 ? 请选择开发语言 TS
 ? 请选择包管理工具 pnpm
 ```

package/docs/zh/components/init-rspack-app.mdx

@@ -1,6 +1,5 @@
 ```bash
 $ npx @modern-js/create@latest myapp
-? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm
 ```

package/docs/zh/configure/app/dev/https.mdx

@@ -77,3 +77,6 @@ export default {
 };
 ```
 
+#### 清理证书缓存
+
+devcert 默认会将生成的证书缓存在 `~/Library/Application\ Support/devcert` ，你可以按需清理。

package/docs/zh/configure/app/tools/html-plugin.mdx

@@ -18,6 +18,19 @@ const defaultOptions = {
   filename, // 基于 `output.distPath` 和 `entryName` 生成
   templateParameters, // 对应 `html.templateParameters` 配置
   chunks: [entryName],
+  minify: { // 基于 `output.minify` 和 `output.disableMinimize` 生成
+    removeComments: false,
+    useShortDoctype: true,
+    keepClosingSlash: true,
+    collapseWhitespace: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    removeEmptyAttributes: true,
+    minifyJS, // 基于 `output.charset`、`output.legalComments` 和 `performance.removeConsole` 生成
+    minifyCSS: true,
+    minifyURLs: true,
+  },
 };
 ```
 

package/docs/zh/configure/app/tools/terser.mdx

@@ -52,5 +52,5 @@ export default {
 ```
 
 :::tip 禁用代码压缩
-如果你需要禁用代码压缩，可以使用 [output.disableMinimize](https://modernjs.dev/builder/api/config-output.html#outputdisableminimize) 配置项。
+如果你需要禁用代码压缩，可以使用 [output.minify](/configure/app/output/minify) 配置项。
 :::

package/docs/zh/configure/app/tools/ts-loader.mdx

@@ -8,10 +8,13 @@ title: tsLoader
 - **默认值：** `undefined`
 - **打包工具：** `仅支持 webpack`
 
-:::warning 不再推荐使用 ts-loader
-使用 [babel-loader](https://modernjs.dev/builder/guide/basic/typescript.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%BB%98%E8%AE%A4%E4%BD%BF%E7%94%A8-babel) 或 [Rspack](https://modernjs.dev/guide/advanced/rspack-start.html) 转译 TypeScript 代码的性能明显优于 ts-loader 且能够使用更多拓展能力。
+:::warning 废弃提示
+
+不推荐在项目中使用 ts-loader，原因如下：
+
+- 启用 ts-loader 时将无法使用 [source.transformImport](/configure/app/source/transform-import) 和 [tools.styledComponents](/configure/app/tools/styled-components) 等由 Babel 和 SWC 提供支持的能力。
+- Rspack 不支持使用 ts-loader。
 
-启用 ts-loader 时将无法使用 [source.transformImport](https://modernjs.dev/configure/app/source/transform-import.html) 和 [tools.styledComponents](https://modernjs.dev/configure/app/tools/styled-components.html) 等由 Babel 和 SWC 提供支持的能力。
 :::
 
 项目中默认不开启 ts-loader，当 `tools.tsLoader` 不为 undefined 则表示开启 ts-loader，同时禁用 babel-loader 对 TypeScript 的编译。

package/docs/zh/configure/app/tools/webpack-chain.mdx

@@ -231,8 +231,8 @@ Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID
 | `PLUGIN.REACT_FAST_REFRESH`    | 对应 `ReactFastRefreshPlugin`                                                      |
 | `PLUGIN.NODE_POLYFILL_PROVIDE` | 对应处理 node polyfill 的 `ProvidePlugin`                                          |
 | `PLUGIN.SUBRESOURCE_INTEGRITY` | 对应 `webpack-subresource-integrity`                                               |
-| `PLUGIN.ASSETS_RETRY`          | 对应 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin`              |
-| `PLUGIN.AUTO_SET_ROOT_SIZE`    | 对应自动设置根字体大小插件 `AutoSetRootSizePlugin`                    |
+| `PLUGIN.ASSETS_RETRY`          | 对应 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin`                           |
+| `PLUGIN.AUTO_SET_ROOT_SIZE`    | 对应自动设置根字体大小插件 `AutoSetRootSizePlugin`                                 |
 
 #### CHAIN_ID.MINIMIZER
 
@@ -247,4 +247,4 @@ Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID
 
 ### 使用示例
 
-使用示例可参考：[WebpackChain 使用示例](https://modernjs.dev/builder/guide/advanced/custom-webpack-config.html#%E4%BD%BF%E7%94%A8-webpack-chain)。
+使用示例可参考：[Rsbuild - bundlerChain 使用示例](https://rsbuild.dev/zh/guide/basic/configure-rspack#%E7%A4%BA%E4%BE%8B)。

package/docs/zh/guides/advanced-features/bff/_meta.json

@@ -1 +1 @@
-["function", "frameworks", "extend-server", "sdk"]
+["function", "frameworks", "extend-server", "sdk", "upload"]

package/docs/zh/guides/advanced-features/bff/upload.mdx

@@ -0,0 +1,5 @@
+# 文件上传
+
+import BffUpload from "@site-docs/components/bff-upload";
+
+<BffUpload />

package/docs/zh/guides/advanced-features/source-build.mdx

@@ -124,13 +124,10 @@ Project reference 提供了以下能力：
 
 ### 示例
 
-在上文的例子中，由于 app 引用了 lib 子项目，我们需要在 app 的 `tsconfig.json` 内配置 `composite` 和 `references`，并指向 lib 对应的相对目录：
+在上文的例子中，由于 app 引用了 lib 子项目，我们需要在 app 的 `tsconfig.json` 内配置 `references`，并指向 lib 对应的相对目录：
 
 ```json title="app/tsconfig.json"
 {
-  "compilerOptions": {
-    "composite": true
-  },
   "references": [
     {
       "path": "../lib"
@@ -139,6 +136,16 @@ Project reference 提供了以下能力：
 }
 ```
 
+同时，需要在 lib 子项目的 `tsconfig.json` 内配置 `composite` 为 `true`：
+
+```json title="lib/A/tsconfig.json"
+{
+  "compilerOptions": {
+    "composite": true
+  },
+}
+```
+
 添加以上两个选项后，project reference 就已经配置完成了，你可以重新启动 VS Code 来查看配置以后的效果。
 
 注意以上只是一个最简单的例子，在实际的 monorepo 项目中，可能会有更复杂的依赖关系，你需要添加完整的 `references` 配置，才能使上述功能正确运作。

package/docs/zh/guides/basic-features/deploy.mdx

@@ -13,11 +13,10 @@ sidebar_position: 15
 目前 Modern.js 仅支持在 Node.js 环境中运行，未来将提供更多运行时环境的支持。
 :::
 
-
 ## 构建部署产物
 
 执行 `modern deploy` 命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖，检测当前部署平台，并自动生成可以在该平台运行的产物。
-如果你希望在本地生成并测试特定部署平台的产物，可以通过设置环境变量来指定平台:
+如果你希望在本地生成并测试特定部署平台的产物，可以通过设置环境变量来指定平台：
 
 ```bash
 MODERNJS_DEPLOY=netlify npx modern deploy
@@ -27,8 +26,7 @@ MODERNJS_DEPLOY=netlify npx modern deploy
 在 Modern.js 官方支持的部署平台中部署时，无需指定环境变量。
 :::
 
-
-## Node.js
+## ModernJS 内置 Node.js 服务器
 
 ### 单仓库项目
 
@@ -223,7 +221,6 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 }
 ```
 
-
 ### Monorepo 项目
 
 :::info
@@ -277,5 +274,106 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 提交你的代码，使用 Vercel 平台部署即可。
 
 
+## 自建 Node.js 服务器
+
+通常情况下，我们推荐使用 Modern.js 内置的 Node.js 服务器来部署应用，它支持托管纯前端项目或者全栈项目，并且保证在开发和生产环境下的表现一致。
+
+如果你的项目是纯前端项目，也可以通过自建 Node.js 服务器来部署应用，以下用一个 Koa 服务器的示例来演示如何托管一个纯前端项目的产物。
+
+例如你有一个 Node.js 服务器的仓库，你可以将项目的产物复制到该仓库下，现在结构如下：
+
+```bash
+.
+├── .output
+│   ├── html
+│   └── static
+└── server.js
+```
+
+在 `server.js` 中，假定有如下代码：
+
+```ts title="server.js"
+import Koa from 'koa';
+
+const app = new Koa();
+app.use(async (ctx, next) => {
+  ctx.body = 'Hello Modern.js';
+});
+app.listen(3000);
+```
+
+现在，你可以新增部分代码，将静态资源和 HTML 文件的访问逻辑添加到 `server.js` 中。这里需要通过 `mime-types` 包来获取静态资源的 MIME 类型，因此我们先安装依赖：
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add mime-types" />
+
+```ts title="server.js"
+const Koa = require('koa');
+const fs = require('fs');
+const path = require('path');
+const mime = require('mime-types');
+
+const app = new Koa();
+app.use(async (ctx, next) => {
+  if (ctx.path.startsWith('/static')) {
+    ctx.type = mime.lookup(ctx.path);
+    ctx.body = fs.createReadStream(path.resolve(__dirname, `.output${ctx.path}`));
+  } else if (ctx.path === '/') {
+    ctx.type = 'html';
+    ctx.body = fs.createReadStream(path.resolve(__dirname, '.output/html/main/index.html'));
+  }
+});
+app.listen(3000);
+```
+
+:::note
+以上代码是最基础的例子，你的应用可能是多入口的，需要根据不同的路径访问不同的 HTML 文件，自建 Node.js 服务器也会存在更多的逻辑。
+:::
+
+需要注意的是，如果你的项目中使用 Modern.js 约定式路由，或是使用 React Router 自行搭建了浏览器端路由，你必须通过正确的 `baseURL` 来访问 HTML 文件。
+
+在 Modern.js 中，默认的 `baseURL` 是 `'/'`，你可以通过在 `modern.config.ts` 中修改 [`server.baseUrl`](/configure/app/server/base-url) 来配置。
+
+:::danger
+存在浏览器路由的项目，永远无法通过 `/index.html` 路径来访问到 HTML 文件。
+:::
+
+## Nignx
+
+Nginx 是一个高性能的 HTTP 和反向代理服务器，它可以处理静态文件、反向代理、负载均衡等功能。在 Nginx 上部署，通常需要配置 `nginx.conf` 文件。
+
+如果你的项目是纯前端项目，也可以通过 Nginx 来部署应用，以下提供一个 Nginx 配置的示例来演示如何托管一个纯前端项目的产物。
+
+```conf title="nginx.conf"
+# user [user] [group];
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen 8080;
+        server_name localhost;
+
+        location / {
+            # root [projectPath]/.output/html/main;
+            index index.html;
+            try_files $uri $uri/ =404;
+        }
+
+        location /static {
+          # alias [projectPath]/.output/static;
+        }
+    }
+}
+```
 
+在上述配置中，你需要将 `[projectPath]` 替换为你的项目路径，将 `[user]` 和 `[group]` 替换为你当前的用户和用户组。
 
+你可以将上述配置复制到 Nginx 安装目录的 `nginx.conf` 文件中，然后启动 Nginx 服务。你也可以通过 `nginx -c` 启动指定路径下的配置文件，此时你需要额外保证 `include` 指令配置的路径正确。

package/docs/zh/guides/concept/entries.mdx

@@ -12,7 +12,7 @@ sidebar_position: 1
 
 在 Modern.js 应用中，每一个入口对应一个独立的页面，也对应一条服务端路由。默认情况下，Modern.js 会基于目录约定来自动确定页面的入口，同时也支持通过配置项来自定义入口。
 
-Modern.js 提供的很多配置项都是以入口为维度进行划分的，比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。
+Modern.js 提供的很多配置项都是以入口为维度进行划分的，比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。如果你希望了解更多关于入口的技术细节，请参考[深入了解](#深入了解)章节的内容。
 
 ## 单入口与多入口
 
@@ -239,6 +239,57 @@ export default defineConfig({
 值得注意的是，默认情况下，Modern.js 认为通过配置指定的入口是**框架模式入口**，将自动生成真正的编译入口。如果你的应用是从 Webpack 或 Vite 等构建工具迁移到 Modern.js 框架时，你通常需要在入口配置中开启 `disableMount` 选项，此时 Modern.js 认为该入口是**构建模式入口**。
 
 
+## 深入了解
+
+页面入口的概念衍生自 webpack 的入口（Entrypoint）概念，其主要用于配置 JavaScript 或其他模块在应用启动时加载和执行。webpack 对于网页应用的 [最佳实践](https://webpack.docschina.org/concepts/entry-points/#multi-page-application) 通常将入口与 HTML 产物对应，即每增加一个入口最终就会在产物中生成一份对应的 HTML 文件。入口引入的模块会在编译打包后生成多个 Chunk 产物，例如对于 JavaScript 模块最终可能会生成数个类似 `dist/static/js/index.ea39u8.js` 的文件产物。
+
+需要注意区分入口、路由等概念之间的关系：
+
+- **入口**：包含多个用于启动时执行的模块。
+- **客户端路由**：在 Modern.js 中通常由 `react-router` 实现，通过 History API 判断浏览器当前 URL 决定加载和显示哪个 React 组件。
+- **服务端路由**：服务端可以模仿 [devServer 的行为](https://webpack.docschina.org/configuration/dev-server/#devserverhistoryapifallback)，将 index.html 页面代替所有 404 响应被返回以实现客户端路由，也可以自行实现任何路由逻辑。
+
+它们的对应关系如下：
+
+- 每个 webpack 网站项目可以包含多个入口
+- 每个入口包含若干个模块（源码文件）
+- 每个入口通常对应一个 HTML 文件产物和若干其它产物。
+- 每个 HTML 文件可以包含多个客户端路由方案（比如在页面中同时使用 `react-router` 和 `@tanstack/react-router`）。
+- 每个 HTML 文件可以被多个服务端路由对应。
+- 每个 HTML 文件可以包含多个客户端路由，当访问单入口应用的不同路由时实际使用的是同一个 HTML 文件。
+
+## 常见问题
+
+1. **`react-router` 定义的每个客户端路由会分别生成一个 HTML 文件吗？**
+
+不会。每个入口通常只会生成一个 HTML 文件，单个入口中如果定义多个客户端路由系统会共用这一个 HTML 文件。
+
+2. **约定式路由的 `routes/` 目录下每个 `page.tsx` 文件都会生成一个 HTML 文件吗？**
+
+不是。约定式路由是基于 `react-router` 实现的客户端路由方案，其约定 `routes/` 目录下每个 `page.tsx` 文件都会对应生成一个 `react-router` 的客户端路由。`routes/` 本身作为一个页面入口，对应最终产物中的一个 HTML 文件。
+
+3. **服务端渲染（SSR）的项目是否会构建多份 HTML 产物？**
+
+在使用服务端渲染应用时并不必须在编译时生成一份 HTML 产物，它可以只包含用于渲染的服务端 JavaScript 产物。此时 `react-router` 将在服务端运行和调度路由，并在每次请求时渲染并响应 HTML 内容。
+
+而 Modern.js 在编译时仍会为每个入口生成包含 HTML 文件的完整的客户端产物，用于在服务端渲染失败时降级为客户端渲染使用。
+
+另一个特殊情况是使用静态站点生成（SSG）的项目，即使是使用约定式路由搭建的单入口 SSG 应用，Modern.js 也会在 webpack 的流程外为每个 `page.tsx` 文件生成一份单独的 HTML 文件。
+
+需要注意的是即使开启服务端渲染，React 通常仍需要执行水合阶段并在前端执行 `react-router` 的路由。
+
+4. **单入口应用是否存在输出多个 HTML 文件的例外情况？**
+
+你可以自行配置 [html-rspack-plugin](https://rspack.dev/zh/plugins/rspack/html-rspack-plugin#%E7%94%9F%E6%88%90%E5%A4%9A%E4%B8%AA-html-%E6%96%87%E4%BB%B6) 为每个入口生成多个 HTML 产物，或使多个入口共用一个 HTML 产物。
+
+5. **什么叫多页应用（Multi-Page Application）？**
+
+多页应用的 “页面” 指的是静态的 HTML 文件。
+一般可以将任何包含多个入口、多个 HTML 文件产物的网页应用称为多页应用。
+狭义的多页应用可能不包含客户端路由、仅通过 `<a>` 之类的标签元素进行 HTML 静态页面之间的跳转，但实践中上多页应用也经常需要为其入口配置客户端路由以满足不同需求。
+
+相反地，通过 `react-router` 定义多个路由的单入口应用因为只生成一个 HTML 文件产物，所以被称为单页应用（Single Page Application）。
+
 ## 弃用功能
 
 目前，如果入口所在的目录满足以下条件，也会成为应用入口。
@@ -267,6 +318,3 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
 ### 构建模式入口
 
 当入口目录中存在 `index.[jt]sx`(即将废弃) 并且没有通过 `export default` 导出函数时，该入口也将被认为是构建模式入口。
-
-
-

package/docs/zh/guides/get-started/introduction.mdx

@@ -5,42 +5,7 @@ sidebar_position: 1
 
 # Modern.js 介绍
 
-**Modern.js 是字节跳动 Web 工程体系的开源版本**，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。
-
-目前 Modern.js 包含两个解决方案，分别面向 Web 应用开发场景 和 npm 包开发场景：
-
-import { SolutionCards } from '@site/src/components/SolutionCards';
-
-<SolutionCards
-  cards={[
-    {
-      title: 'Modern.js Framework',
-      description: '基于 React 的渐进式 Web 开发框架',
-      link: 'http://modernjs.dev/',
-    },
-    {
-      title: 'Modern.js Module',
-      description: '易用、高性能的 npm 包开发方案',
-      link: 'http://modernjs.dev/module-tools/',
-    },
-  ]}
-/>
-
-## 关于文档
-
-**当前文档站对应的是 Modern.js 框架**，适用于开发 Web 应用。
-
-- 如果你需要开发一个 npm 包，请移步 [Modern.js Module 文档](https://modernjs.dev/module-tools)。
-- 如果你需要一个构建工具来打包 Web 应用，请移步 [Rsbuild 文档](https://rsbuild.dev/)。
-- 如果你需要开发一个文档站点，推荐使用 [Rspress 文档](https://rspress.dev/)。
-
-:::tip
-由于 Modern.js 框架的使用最为广泛，在本文档站中，我们会省略「框架」，直接称其为 Modern.js。
-:::
-
-## Modern.js 框架
-
-**Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。
+**Modern.js 是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。
 
 Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。
 

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.60.5",
+  "version": "2.61.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.60.5"
+    "@modern-js/sandpack-react": "2.61.0"
   },
   "devDependencies": {
-    "@rspress/shared": "1.31.1",
+    "@rspress/shared": "1.35.3",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2",
@@ -33,7 +33,7 @@
     "fs-extra": "^10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rspress": "1.31.1",
+    "rspress": "1.35.3",
     "ts-node": "^10.9.1",
     "typescript": "^5"
   },