Skip to content
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@ export default defineConfig({
});
```

::::info Scope
:::info
- Use `output.ssg` for single-entry apps.
- Use `output.ssgByEntries` for multi-entry apps.
- If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.
::::

:::

## Development Debugging

Expand Down
13 changes: 7 additions & 6 deletions packages/document/docs/en/guides/concept/entries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -193,10 +193,15 @@ If you don't want to use any of Modern.js's runtime capabilities, you can also m

```js title=src/entry.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const container = document.getElementById('root');

if (container) {
const root = createRoot(container);
root.render(<App />);
}
```

In this mode, **you will not be able to use Modern.js framework's runtime capabilities**, such as:
Expand Down Expand Up @@ -237,10 +242,6 @@ export default defineConfig({
});
```

It is worth noting that, by default, Modern.js considers entries specified through the configuration as **framework mode entries** and will automatically generate the actual compilation entry.

If your application is migrating from build tools like Webpack or Vite to the Modern.js framework, you typically need to enable the `disableMount` option in the entry configuration. In this case, Modern.js will treat the entry as a **build mode entry**.

## In-Depth

The concept of page entry is derived from the concept of [Entrypoint](https://webpack.js.org/concepts/entry-points/) in webpack. It is mainly used to configure JavaScript or other modules to be executed during application startup. webpack's [best practice](https://webpack.docschina.org/concepts/entry-points/#multi-page-application) for web applications usually corresponds entries to HTML output files, meaning each additional entry will eventually generate a corresponding HTML file in the output. The modules imported by the entry will be compiled and packaged into multiple Chunk outputs. For example, JavaScript modules may ultimately generate several file outputs similar to `dist/static/js/index.ea39u8.js`.
Expand Down
7 changes: 6 additions & 1 deletion packages/document/docs/zh/guides/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,10 @@
"name": "troubleshooting",
"label": "troubleshooting"
},
"deprecated"
"deprecated",
{
"type": "dir",
"name": "upgrade",
"label": "从 Modern.js 2.0 升级"
}
]
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ interface CacheOptions {
## 使用范围

与 react 的 [cache](https://react.dev/reference/react/cache) 函数只能在 server component 组件中使用不同,
EdenX 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。
Modern.js 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。

## 详细用法

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@ export default defineConfig({
});
```

::::info 适用范围
:::info 适用范围
- 单入口请使用 `output.ssg`。
- 多入口请使用 `output.ssgByEntries`。
- 当仅设置 `output.ssg: true` 且未配置 `output.ssgByEntries` 时,所有入口下的所有路由都会作为 SSG 路由处理。
::::

:::

## 开发环境调试

Expand Down
12 changes: 8 additions & 4 deletions packages/document/docs/zh/guides/concept/entries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -196,12 +196,18 @@ beforeRender().then(() => {

```js title=src/entry.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const container = document.getElementById('root');

if (container) {
const root = createRoot(container);
root.render(<App />);
}
```


在该模式下,**将无法使用 Modern.js 框架的运行时能力**,比如:

- 约定式路由,即基于 `src/routes` 下文件的路由
Expand Down Expand Up @@ -241,8 +247,6 @@ 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` 的文件产物。
Expand Down
1 change: 1 addition & 0 deletions packages/document/docs/zh/guides/upgrade/_meta.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
["overview", "config", "entry"]
Loading