@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/zh/configure/app/deploy/microFrontend.mdx

@@ -1,55 +0,0 @@
----
-title: microFrontend
----
-
-# deploy.microFrontend
-
-- **类型：** `object`
-- **默认值：** `{ enableHtmlEntry: true, externalBasicLibrary: false }`
-
-```ts
-interface MicroFrontend {
-  enableHtmlEntry?: boolean;
-  externalBasicLibrary?: boolean;
-  moduleApp?: string;
-}
-```
-
-开发者可使用 `deploy.microFrontend` 属性来配置微前端子应用的信息。
-
-:::caution 注意
-需要先通过 `pnpm run new` 启用「微前端」 功能。
-
-:::
-
-## 示例
-
-```ts
-export default defineConfig({
-  deploy: {
-    microFrontend: {
-      enableHtmlEntry: true,
-    },
-  },
-});
-```
-
-## 配置项
-
-### enableHtmlEntry
-
-- **类型：** `boolean`
-
-- **默认值：** `true`
-
-是否启用 html 入口的功能，默认为 `true`，将子应用构建成 `HTML` 模式，Garfish 支持了 `html` 入口，可以开启开选项，体验对应功能，为 HTML 入口时直接将子应用 entry 指向子应用的 html 即可。
-
-可以通过设置为 `false`, 表明子应用构建为 `js`，构建为 `js` 后子应用无法独立运行，为 `JS` 入口时将子应用的入口文件指向子应用的 `JS`
-
-### externalBasicLibrary
-
-- **类型：** `boolean`
-
-- **默认值：** `false`
-
-是否 `external` 基础库，当设置为 `true` 时，当前子应用将会 `external`：`react`、`react-dom`，`Modern.js` 主应用会自动 `setExternal` 这两个基础库，如果其他类型的框架请通过 `Garfish.setExternal` 增加 `react`、`react-dom` 依赖

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

@@ -1,25 +0,0 @@
----
-title: port
----
-
-# dev.port
-
-- **类型：** `number`
-- **默认值：** `8080`
-
-设置 Dev Server 监听的端口号。
-
-默认情况下，Dev Server 会监听 8080 端口，并在端口被占用时自动递增端口号。
-
-### 示例
-
-将端口设置为 `3000`：
-
-```ts
-export default {
-  dev: {
-    port: 3000,
-  },
-};
-```
-

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

@@ -1,9 +0,0 @@
----
-title: proxy
----
-
-# dev.proxy
-
-import GlobalProxyConfig from "@site-docs/components/global-proxy-config"
-
-<GlobalProxyConfig />

package/docs/zh/configure/app/experiments/lazy-compilation.mdx

@@ -1,105 +0,0 @@
----
-title: lazyCompilation
----
-
-# experiments.lazyCompilation
-
-- **类型：**
-
-```ts
-type LazyCompilationOptions =
-  | boolean
-  | {
-      // 是否为异步模块开启延迟编译
-      imports?: boolean;
-      // 是否为入口模块开启延迟编译
-      entries?: boolean;
-      // 指定哪些导入的模块应该被延迟编译
-      test?: RegExp | ((m: Module) => boolean);
-    };
-```
-
-- **默认值：** `false`
-
-用于开启延迟编译（即按需编译）的能力。当开启此配置项时，Modern.js 会进行延迟编译，提升项目的编译启动速度。
-
-延迟编译只在开发环境下生效。
-
-## Rspack
-
-在 Rsbuild 中，Lazy Compilation 默认是开启的。但在 Modern.js 中，部分功能特性存在冲突，因此默认是关闭的。
-
-如果项目中使用 SSR 或是[预加载路由](/guides/basic-features/routes.html#预加载)时，请不要开启 Lazy Compilation。
-
-import RsbuildLink from '@site/src/components/RsbuildLink';
-
-:::info
-该配置项的使用方式与 Rsbuild 完全一致，详细信息可参考 <RsbuildLink configName="dev.lazyCompilation"/>。
-:::
-
-## Webpack
-
-### 延迟编译异步模块
-
-延迟编译 [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) 引入的异步模块：
-
-```ts
-export default {
-  experiments: {
-    lazyCompilation: {
-      imports: true,
-      entries: false,
-    },
-  },
-};
-```
-
-开启 `imports` 选项后，所有的异步模块只有在被请求时才触发编译。如果你的项目是一个单页应用（SPA），并通过 dynamic import 进行了路由拆分，那么会有明显的编译提速效果。
-
-### 延迟编译入口模块
-
-除了延迟编译异步模块，你也可以选择同时延迟编译入口模块和异步模块。
-
-```ts
-export default {
-  experiments: {
-    lazyCompilation: {
-      imports: true,
-      entries: true,
-    },
-  },
-};
-```
-
-以上配置也可以简化为：
-
-```ts
-export default {
-  experiments: {
-    lazyCompilation: true,
-  },
-};
-```
-
-开启 `entries` 选项后，当启动编译时，不会编译所有的页面，而是仅在路由跳转到对应的页面时，才对该页面进行编译。
-
-使用延迟编译入口模块时，有以下注意事项：
-
-- 只适用于多页应用（MPA），对单页应用（SPA）没有优化效果。
-- 当你访问一个页面时，由于要等待页面编译完成，会有一段时间的白屏。
-
-### 局限性
-
-#### 禁用拆包规则
-
-当你开启延迟编译时，为了保证编译结果正常，Modern.js 会在开发环境下禁用拆包规则。这不会影响生产环境的打包产物，但会导致开发环境和生产环境的打包产物有一定差异。
-
-#### 使用代理
-
-Lazy Compilation 依赖 webpack 在本地启动的开发服务器，当你将某个域名代理到 localhost 进行开发时，Lazy Compilation 将无法正常工作。因此，如果你需要使用代理时，请禁用 Lazy Compilation。
-
-#### 其他潜在的问题
-
-考虑到 Lazy Compilation 仍然是 webpack 的实验性功能，因此你在使用过程中，可能会遇到一些潜在的问题，比如编译产物的行为变化，或是编译出现异常。
-
-当你遇到这些问题时，可以参考 [webpack 的 Issues](https://github.com/webpack/webpack/issues) 寻找解决方案，也可以关闭 `lazyCompilation` 配置项。

package/docs/zh/configure/app/html/disable-html-folder.mdx

@@ -1,45 +0,0 @@
----
-title: disableHtmlFolder
----
-
-# html.disableHtmlFolder
-
-- **类型：** `boolean`
-- **默认值：** `false`
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.outputStructure` 的代替。
-:::
-
-移除 HTML 产物对应的文件夹。开启该选项后，生成的 HTML 文件目录会从 `[name]/index.html` 变为 `[name].html`。
-
-### 示例
-
-默认情况下，HTML 产物在 `dist` 目录下的结构为：
-
-```bash
-/dist
-└── html
-    └── main
-        └── index.html
-```
-
-开启 `html.disableHtmlFolder` 配置:
-
-```js
-export default {
-  html: {
-    disableHtmlFolder: true,
-  },
-};
-```
-
-重新编译后，HTML 产物在 dist 中的目录结构如下：
-
-```bash
-/dist
-└── html
-    └── main.html
-```
-
-> 如果需要设置 HTML 文件在 dist 目录中的路径，请使用 `output.distPath.html` 配置。

package/docs/zh/configure/app/html/favicon-by-entries.mdx

@@ -1,37 +0,0 @@
----
-title: faviconByEntries
----
-
-# html.faviconByEntries
-
-- **类型：** `Record<string, string>`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面设置不同的 favicon。
-
-整体用法与 `favicon` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`faviconByEntries` 的优先级高于 `favicon`，因此会覆盖 `favicon` 中设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.favicon` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    favicon: './src/assets/default.png',
-    faviconByEntries: {
-      foo: './src/assets/foo.png',
-    },
-  },
-};
-```
-
-重新编译后，可以看到:
-
-- 页面 `foo` 的 favicon 为 `./src/assets/foo.png`。
-- 其他页面的 favicon 为 `./src/assets/default.png`。
-

package/docs/zh/configure/app/html/inject-by-entries.mdx

@@ -1,37 +0,0 @@
----
-title: injectByEntries
----
-
-# html.injectByEntries
-
-- **类型：** `Record<string, boolean | string>`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面设置不同的 script 标签插入位置。
-
-整体用法与 `inject` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`injectByEntries` 的优先级高于 `inject`，因此会覆盖 `inject` 中设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.inject` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    inject: 'head',
-    injectByEntries: {
-      foo: 'body',
-    },
-  },
-};
-```
-
-重新编译后，可以看到:
-
-- 页面 `foo` 的 script 标签会插入到 `body` 标签内。
-- 其他页面的 script 标签会插入到 `head` 标签内。
-

package/docs/zh/configure/app/html/meta-by-entries.mdx

@@ -1,48 +0,0 @@
----
-title: metaByEntries
----
-
-# html.metaByEntries
-
-- **类型：** `Record<string, Meta>`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面设置不同的 meta 标签。
-
-整体用法与 `meta` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`metaByEntries` 的优先级高于 `meta`，因此会覆盖 `meta` 中设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.meta` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    meta: {
-      description: 'ByteDance',
-    },
-    metaByEntries: {
-      foo: {
-        description: 'TikTok',
-      },
-    },
-  },
-};
-```
-
-编译后，可以看到页面 `foo` 的 meta 为：
-
-```html
-<meta name="description" content="TikTok" />
-```
-
-其他页面的 meta 为：
-
-```html
-<meta name="description" content="ByteDance" />
-```
-

package/docs/zh/configure/app/html/tags-by-entries.mdx

@@ -1,44 +0,0 @@
----
-title: tagsByEntries
----
-
-# html.tagsByEntries
-
-- **类型：** `Record<string, ArrayOrNot<HtmlInjectTag | HtmlInjectTagHandler>>`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面注入不同的标签。
-
-整体用法与 `tags` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`tagsByEntries` 的优先级高于 `tags`，因此会覆盖 `tags` 中设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.tags` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    tags: [{ tag: 'script', attrs: { src: 'a.js' } }],
-    tagsByEntries: {
-      foo: [{ tag: 'script', attrs: { src: 'b.js' } }],
-    },
-  },
-};
-```
-
-编译后，可以看到页面 `foo` 注入标签：
-
-```html
-<script src="b.js"></script>
-```
-
-其他页面则注入了：
-
-```html
-<script src="a.js"></script>
-```
-

package/docs/zh/configure/app/html/template-by-entries.mdx

@@ -1,33 +0,0 @@
----
-title: templateByEntries
----
-
-# html.templateByEntries
-
-- **类型：** `Object`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面设置不同的 HTML 模板。
-
-整体用法与 `template` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`templateByEntries` 的优先级高于 `template`，因此会覆盖 `template` 设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.template` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    template: './static/index.html',
-    templateByEntries: {
-      foo: './src/pages/foo/index.html',
-      bar: './src/pages/bar/index.html',
-    },
-  },
-};
-```
-

package/docs/zh/configure/app/html/template-parameters-by-entries.mdx

@@ -1,36 +0,0 @@
----
-title: templateParametersByEntries
----
-
-# html.templateParametersByEntries
-
-- **类型：** `Object`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面设置不同的模板参数。
-
-整体用法与 `templateParameters` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`templateParametersByEntries` 的优先级高于 `templateParameters`，因此会覆盖 `templateParameters` 中设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.templateParameters` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    templateParametersByEntries: {
-      foo: {
-        type: 'a',
-      },
-      bar: {
-        type: 'b',
-      },
-    },
-  },
-};
-```
-

package/docs/zh/configure/app/html/title-by-entries.mdx

@@ -1,37 +0,0 @@
----
-title: titleByEntries
----
-
-# html.titleByEntries
-
-- **类型：** `Record<string, string>`
-- **默认值：** `undefined`
-
-用于在多页面的场景下，为不同的页面设置不同的 `title`。
-
-整体用法与 `title` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-
-`titleByEntries` 的优先级高于 `title`，因此会覆盖 `title` 中设置的值。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.title` 的函数用法代替。
-:::
-
-### 示例
-
-```js
-export default {
-  html: {
-    title: 'ByteDance',
-    titleByEntries: {
-      foo: 'TikTok',
-    },
-  },
-};
-```
-
-重新编译后，可以看到:
-
-- 页面 `foo` 的 title 为 `TikTok`。
-- 其他页面的 title 为 `ByteDance`。
-

package/docs/zh/configure/app/output/css-module-local-ident-name.mdx

@@ -1,21 +0,0 @@
----
-title: cssModuleLocalIdentName
----
-
-# output.cssModuleLocalIdentName
-
-- **类型：** `string`
-- **默认值：**
-
-```ts
-// isProd 表示生产环境构建
-const localIdentName = isProd
-  ? '[local]-[hash:base64:6]'
-  : '[path][name]__[local]-[hash:base64:6]';
-```
-
-设置 CSS Modules 编译后生成的 className 格式。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.cssModules.localIdentName` 的代替。
-:::

package/docs/zh/configure/app/output/disable-css-extract.mdx

@@ -1,16 +0,0 @@
----
-title: disableCssExtract
----
-
-# output.disableCssExtract
-
-- **类型：** `boolean`
-- **默认值：** `false`
-
-是否禁用 CSS 提取逻辑，并将 CSS 文件内联到 JS 文件中。
-
-默认情况下，Modern.js 会把 CSS 提取为独立的 `.css` 文件，并输出到构建产物目录。设置该选项为 `true` 后，CSS 文件会被内联到 JS 文件中，并在运行时通过 `<style>` 标签插入到页面上。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.injectStyles` 的代替。
-:::

package/docs/zh/configure/app/output/disable-filename-hash.mdx

@@ -1,16 +0,0 @@
----
-title: disableFilenameHash
----
-
-# output.disableFilenameHash
-
-- **类型：** `boolean`
-- **默认值：** `false`
-
-移除生产环境的构建产物名称中的 hash 值。
-
-在生产环境构建后，会自动在文件名中间添加 hash 值，如果不需要添加，可以通过 `output.disableFilenameHash` 配置来禁用该行为。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.filenameHash` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/disable-minimize.mdx

@@ -1,14 +0,0 @@
----
-title: disableMinimize
----
-
-# output.disableMinimize
-
-- **类型：** `boolean`
-- **默认值：** `false`
-
-是否禁用生产环境下的代码压缩。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.minify` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/disable-node-polyfill.mdx

@@ -1,22 +0,0 @@
----
-title: disableNodePolyfill
----
-
-# output.disableNodePolyfill
-
-- **类型：** `boolean`
-- **默认值：** `true`
-
-该配置项用于控制是否在代码中注入 Node 模块的 Polyfill。
-
-默认情况下，我们不会将 Node Polyfill 注入到代码中，以避免造成代码体积增大。如果你需要注入 Node Polyfill，可以将 `output.disableNodePolyfill` 设置为 `false`：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  output: {
-    disableNodePolyfill: false,
-  },
-});
-```
-
-该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) 文档来了解详细信息。

package/docs/zh/configure/app/output/disable-source-map.mdx

@@ -1,31 +0,0 @@
----
-title: disableSourceMap
----
-
-# output.disableSourceMap
-
-- **类型：**
-
-```ts
-type DisableSourceMap =
-  | boolean
-  | {
-      js?: boolean;
-      css?: boolean;
-    };
-```
-
-- **默认值：**
-
-```ts
-const defaultDisableSourceMap = {
-  js: false,
-  css: process.env.NODE_ENV === 'production',
-};
-```
-
-是否禁用 Source Map 生成。
-
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.sourceMap` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/enable-asset-fallback.mdx

@@ -1,36 +0,0 @@
----
-title: enableAssetFallback
----
-
-# output.enableAssetFallback
-
-- **类型：** `boolean`
-- **默认值：** `false`
-
-开启该选项后，当编译过程中遇到无法识别的文件类型时，会直接将该文件直接输出到产物目录；否则会抛出一个异常。
-
-### 示例
-
-开启配置项：
-
-```js
-export default {
-  output: {
-    enableAssetFallback: true,
-  },
-};
-```
-
-在代码中引用一个未知类型的模块：
-
-```js
-import './foo.xxx';
-```
-
-编译后，`foo.xxx` 会被自动输出到 `dist/static/media` 目录下。
-
-你可以通过 `output.distPath.media` 和 `output.filename.media` 配置项来控制 fallback 后的输出路径和文件名称。
-
-:::tip
-开启该配置会导致 webpack 配置中的 rules 结构变化，增加一层额外的 `oneOf` 嵌套结构。大多数情况下，我们不推荐你使用此配置。
-:::