@modern-js/main-doc 2.69.5 → 3.0.0-alpha.0

package/docs/zh/components/global-proxy-config.mdx

@@ -1,85 +0,0 @@
-- **类型：** `string | Object`
-- **默认值：** `null`
-
-该选项用于在开发环境下启用基于 [whistle](https://wproxy.org/whistle/) 的全局代理，可以用来查看、修改 HTTP/HTTPS 请求、响应、也可以用作代理服务器。
-
-### 注册插件
-
-使用该选项前，你需要提前安装和注册 `@modern-js/plugin-proxy` 插件：
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
-
-安装完成后，在 `modern.config.ts` 文件中注册插件：
-
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { proxyPlugin } from '@modern-js/plugin-proxy';
-
-export default defineConfig({
-  plugins: [appTools(), proxyPlugin()],
-});
-```
-
-### Object 类型
-
-`dev.proxy` 的值为 `Object` 时，对象的 `key` 对应匹配的 `pattern`，对象的 `value` 对应匹配的 `target`。
-
-例如：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  dev: {
-    proxy: {
-      'https://www.baidu.com': 'https://google.com.hk',
-      //可以通过 file 协议直接返回静态文件。
-      'https://example.com/api': 'file://./data.json',
-    },
-  },
-});
-```
-
-请参考 [whistle - 匹配模式](https://wproxy.org/whistle/pattern.html) 来了解详细用法。
-
-### String 类型
-
-`dev.proxy` 的值为 `string` 时， 可以用来指定单独的代理文件，例如：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  dev: {
-    proxy: './proxy.js',
-  },
-});
-```
-
-```js title="proxy.js"
-module.exports = {
-  name: 'my-app',
-  rules: `
-    ^example.com:8080/api/***   http://localhost:3001/api/$
-  `,
-};
-```
-
-### 启动代理
-
-执行 `dev`, 提示如下时，即代理服务器启动成功：
-
-```bash
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-info      Starting proxy server.....
-success   Proxy server start on localhost:8899
-```
-
-访问 `localhost:8899`, 可以在 UI 界面上查看 Network 以及配置代理规则：
-
-![proxy ui 界面](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/dev-proxy.png)
-
-:::info
-https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。**密码仅在信任证书时使用，不会泄漏或者用于其他环节**。
-
-:::

package/docs/zh/components/global-proxy.mdx

@@ -1,29 +0,0 @@
-:::warning
-`@modern-js/plugin-proxy` 已不再维护，后续将不再发布新版本。请迁移到其他代理工具，比如 [whistle](https://github.com/avwo/whistle)。
-:::
-
-Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`，该插件底层基于 [whistle](https://github.com/avwo/whistle)，可用来查看、修改 HTTP/HTTPS 的请求和响应，也可作为 HTTP 代理服务器使用。
-
-### 设置代理规则
-
-引入代理插件并填写规则后，执行 `pnpm run dev`，Modern.js 会在开发服务器启动之后，自动启用代理服务器。
-
-具体代理规则，可通过 [`dev.proxy`](/configure/app/dev/proxy) 选项或 `config/proxy.js` 文件进行设置。
-
-### 代理服务器 UI 界面
-
-安装代理插件并配置代理规则后， 执行 `pnpm run dev` 命令：
-
-```bash
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-info      Starting proxy server.....
-success   Proxy server start on localhost:8899
-```
-
-在控制台中可以看到代理服务器成功启动。
-
-访问 `http://localhost:8899`，显示下图所示的 UI 界面后，即可通过界面设置规则。
-
-![debug-proxy-ui](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/debug/debug-proxy-ui.png)

package/docs/zh/components/package-manager.mdx

@@ -1,11 +0,0 @@
-### packageManager
-
-问题：请选择包管理工具
-
-选项：
-
-- pnpm -- pnpm
-
-- Yarn -- yarn
-
-- npm -- npm

package/docs/zh/components/reduck-notify.mdx

@@ -1,27 +0,0 @@
-:::warning
-从 `MAJOR_VERSION.67.0` 起，Modern.js 不再默认提供 Reduck 状态管理能力。如果需要使用 Reduck，您需要安装并注册 state 插件。
-
-**安装步骤**
-
-1. 安装 `@modern-js/plugin-state` 依赖：
-
-```bash
-pnpm add @modern-js/plugin-state
-```
-
-2. 注册 state 插件：
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-import { statePlugin } from '@modern-js/plugin-state';
-
-export default defineConfig({
-  ...,
-  plugins: [
-    ...,
-    statePlugin(),
-  ],
-});
-```
-
-:::

package/docs/zh/components/reduck-tip.mdx

@@ -1,8 +0,0 @@
-
-
-:::info 补充信息
-默认情况下，本节所有 API 的导出包名为：`@modern-js/runtime/model`。
-
-如果是在 Modern.js 以外单独集成 Reduck，导出包名为：`@modern-js-reduck/react`。
-
-:::

package/docs/zh/configure/app/auto-load-plugin.mdx

@@ -1,66 +0,0 @@
----
-sidebar_position: 22
----
-
-# autoLoadPlugins
-
-- **类型：** `boolean`
-- **默认值：** `false`
-
-用于配置 Modern.js 是否开启自动注册插件。
-
-:::warning
-该配置不推荐使用，相比手动注册插件，该配置相对黑盒且无法为插件添加自定义配置。
-:::
-
-### 手动注册插件
-
-默认情况下，安装插件后，你需要在 `modern.config.ts` 文件中手动注册插件。
-
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { bffPlugin } from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [appTools(), bffPlugin()],
-});
-```
-
-### 自动注册插件
-
-除了手段注册，Modern.js 还提供自动注册插件的方式: 将 `autoLoadPlugin` 配置项置为 `true`。
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  autoLoadPlugins: true,
-});
-```
-
-Modern.js 将通过以下几个步骤帮你自动注册插件
-
-1. Modern.js 在内部维护一份官方插件列表。
-
-```js
-const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-tailwindcss', ...];
-```
-
-2. Modern.js 将读取你的 `package.json` 文件，收集依赖信息。
-
-```json title="package.json"
-"dependencies": {
-  "@modern-js/plugin-tailwindcss": "x.x.x"
-  ...
-},
-"devDependencies": {
-  "@modern-js/app-tools": "x.x.x"
-  ...
-}
-```
-
-3. Modern.js 观察到你安装了 `@modern-js/plugin-tailwindcss` 和 `@modern-js/app-tools` 等依赖后，将会引入插件自动注册。
-
-可以注意到这种方式相对黑盒，你甚至对加载插件的过程是无感知的。我们希望更多的细节暴露给开发者，能让开发者去控制这一过程。
-
-**因此我们更加推荐你手动注册插件。**

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',
-    },
-  },
-};
-```
-