@modern-js/main-doc 2.0.0-beta.5 → 2.0.0-beta.7

package/zh/components/global-proxy-config.md

@@ -0,0 +1,70 @@
+* 类型： `string | Object`
+* 默认值： `null`
+
+配置该选项后，开发环境时会启动全局代理，类似 [Fiddler](https://www.telerik.com/fiddler), [Charles](https://www.charlesproxy.com/) 等 web 代理调试工具，可以用来查看、修改 HTTP/HTTPS 请求、响应、也可以用作代理服务器。
+
+
+:::tip 提示
+使用该选项需要提前安装 `@modern-js/plugin-proxy`。
+:::
+
+值为 `Object` 时，对象的 `key` 对应匹配的 `pattern`，对象的 `value` 对应匹配的 `target`。
+
+例如：
+
+```typescript 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',
+    }
+  }
+});
+```
+
+值为 `string` 时， 可以用来指定单独的代理文件，例如：
+
+
+```typescript 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/$
+  `,
+};
+```
+
+:::info 注
+Modern.js 全局代理实现底层基于 [whistle](https://wproxy.org/whistle/), 更多匹配模式请参考: [匹配模式](https://wproxy.org/whistle/pattern.html)
+:::
+
+执行 `dev`, 提示如下时，即代理服务器启动成功：
+
+```bash
+  App running at:
+
+  Local:    http://localhost:8080/
+  Network:  http://192.168.0.1:8080/
+
+ℹ  info      Starting the 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)
+
+:::caution 注意
+https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。**密码仅在信任证书时使用，不会泄漏或者用于其他环节**。
+:::
+

package/zh/components/micro-master-manifest-config.md

@@ -0,0 +1,15 @@
+## `manifest`
+
+```ts
+interface Manifest {
+  getAppList?: ()=> Array<AppInfo>
+}
+```
+
+### `getAppList?`
+
+通过 `getAppList` 配置，可以自定义如何获取远程列表数据
+
+```ts
+type GetAppList = ()=> Promise<Array<AppInfo>>;
+```

package/zh/components/router-legacy-tip.md

@@ -0,0 +1 @@
+

package/zh/configure/app/auto-load-plugin.md

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

package/zh/configure/app/deploy/microFrontend.md

@@ -52,13 +52,3 @@ export default defineConfig({
 * 默认值：`false`
 
 是否 `external` 基础库，当设置为 `true` 时，当前子应用将会 `external`：`react`、`react-dom`，`EdenX` 主应用会自动 `setExternal` 这两个基础库，如果其他类型的框架请通过 `Garfish.setExternal` 增加 `react`、`react-dom` 依赖
-
-
-### moduleApp
-
-* 类型：`string`
-
-* 默认值：`undefined`
-
-该值可以配置子应用的名称，目前主要结合 [`dev.withMasterApp`](/docs/configure/app/dev/with-master-app) 进行测试。
-

package/zh/configure/app/dev/proxy.md

@@ -5,74 +5,6 @@ sidebar_label: proxy
 # dev.proxy
 
 
+import GlobalProxyConfig from '@site-docs/components/global-proxy-config.md'
 
-* 类型： `string | Object`
-* 默认值： `null`
-
-配置该选项后，开发环境时会启动全局代理，类似 [Fiddler](https://www.telerik.com/fiddler), [Charles](https://www.charlesproxy.com/) 等 web 代理调试工具，可以用来查看、修改 HTTP/HTTPS 请求、响应、也可以用作代理服务器。
-
-
-:::tip 提示
-使用该选项需要提前安装 `@modern-js/plugin-proxy`。
-:::
-
-值为 `Object` 时，对象的 `key` 对应匹配的 `pattern`，对象的 `value` 对应匹配的 `target`。
-
-例如：
-
-```typescript 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',
-    }
-  }
-});
-```
-
-值为 `string` 时， 可以用来指定单独的代理文件，例如：
-
-
-```typescript 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/$
-  `,
-};
-```
-
-:::info 注
-Modern.js 全局代理实现底层基于 [whistle](https://wproxy.org/whistle/), 更多匹配模式请参考: [匹配模式](https://wproxy.org/whistle/pattern.html)
-:::
-
-执行 `dev`, 提示如下时，即代理服务器启动成功：
-
-```bash
-  App running at:
-
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-ℹ  info      Starting the 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)
-
-:::caution 注意
-https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。**密码仅在信任证书时使用，不会泄漏或者用于其他环节**。
-:::
-
+<GlobalProxyConfig />

package/zh/configure/app/runtime/master-app.md

@@ -13,24 +13,10 @@ sidebar_label: masterApp
 ## 示例
 
 import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend.md';
+import MasterManifestAppConfig from '@site-docs/components/micro-master-manifest-config.md';
 
 <EnableMicroFrontend />
-
-## `manifest`
-
-```ts
-interface Manifest {
-  getAppList?: ()=> Array<AppInfo>
-}
-```
-
-#### `getAppList?`
-
-通过 `getAppList` 配置，可以自定义如何获取远程列表数据
-
-```ts
-type GetAppList = ()=> Promise<Array<AppInfo>>;
-```
+<MasterManifestAppConfig />
 
 
 ### apps

package/zh/configure/app/runtime/router.md

@@ -2,19 +2,33 @@
 sidebar_label: router
 ---
 
+import RouterLegacyTip from '@site-docs/components/router-legacy-tip.md'
+
+<RouterLegacyTip />
+
 # runtime.router
 
 * 类型： `boolean | Object`
 * 默认值： `false`。
 
-开启 `router` 之后，支持使用 Modern.js 默认提供的约定式路由进行路由管理。
+开启 `router` 之后，支持使用 Modern.js 默认提供的约定式路由进行路由管理。Modern.js 的路由模块基于 [React Router 6](https://reactrouter.com/) 实现。
 
 具体配置如下：
 
+### basename
+
+* 类型： `string`
+* 默认值： ``
+
+设置客户端路由的 `basename`，通常用于应用需要部署在域名非根路径下的场景。
+
 ### supportHtml5History
 
-* 类型： `Boolean`
+* 类型： `boolean`
 * 默认值： `true`
 
-值为 `true` 则使用 `BrowserRouter` 否则使用 `HashRouter`。
+值为 `true`，使用 `BrowserRouter`；否则使用 `HashRouter`。推荐使用 `BrowserRouter`。
 
+:::warning
+当开启 SSR 时，不支持设置 `supportHtml5History`。
+:::

package/zh/configure/app/source/entries.md

@@ -61,7 +61,6 @@ export default defineConfig({
 
 * `entry`：`string`，入口文件路径。
 * `disableMount`：`boolean = false`，关闭 Modern.js 生成入口代码的行为。
-* `enableFileSystemRoutes`：`boolean = false`，是否 [使用约定式路由](/docs/apis/app/hooks/src/pages)。
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -76,8 +75,7 @@ export default defineConfig({
       // 启用约定式路由
       entry_spa: {
         // 约定式路由的入口路径必须设置为目录
-        entry: './src/about',
-        enableFileSystemRoutes: true,
+        entry: './src/about'
       },
     },
   },

package/zh/configure/app/tools/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "tools (底层配置)",
-  "position": 10
+  "position": 12
 }

package/zh/configure/app/tools/tailwindcss.md

@@ -4,39 +4,32 @@ title: tools.tailwindcss
 sidebar_label: tailwindcss
 ---
 
-
-* 类型： `Object | Function`
-* 默认值：见下方配置详情。
+- 类型： `Object | Function`
+- 默认值：见下方配置详情。
 
 <details>
   <summary>TailwindCSS 配置详情</summary>
 
 ```js
-  const tailwind = {
-    purge: {
-        enabled: options.env === 'production',
-        content: [
-          './config/html/**/*.html',
-          './config/html/**/*.ejs',
-          './config/html/**/*.hbs',
-          './src/**/*',
-        ],
-        layers: ['utilities'],
-    },
-    // https://tailwindcss.com/docs/upcoming-changes
-    future: {
-      removeDeprecatedGapUtilities: false,
-      purgeLayersByDefault: true,
-      defaultLineHeights: false,
-      standardFontWeights: false,
-    },
-    theme: source.designSystem // 使用source.designSystem配置作为Tailwind CSS Theme配置
-  }
+const tailwind = {
+  content: [
+    './config/html/**/*.html',
+    './config/html/**/*.ejs',
+    './config/html/**/*.hbs',
+    './src/**/*.js',
+    './src/**/*.jsx',
+    './src/**/*.ts',
+    './src/**/*.tsx',
+    './storybook/**/*',
+  ],
+  theme: source.designSystem, // 使用source.designSystem配置作为Tailwind CSS Theme配置
+};
 ```
 
 :::tip 提示
 更多关于：<a href="https://tailwindcss.com/docs/configuration" target="_blank">TailwindCSS 配置</a>。
 :::
+
 </details>
 
 对应 [TailwindCSS](https://tailwindcss.com/docs/configuration) 的配置，值为 `Object` 类型时，与默认配置通过 `Object.assign` 合并。

package/zh/guides/advanced-features/bff/frameworks.md

@@ -3,6 +3,8 @@ sidebar_position: 3
 title: 运行时框架
 ---
 
+Modern.js 的 BFF 支持不同的运行时框架，当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
+
 ## 函数写法
 
 在函数写法下，各类运行时框架仅中间件写法存在差异，其他实现基本相同。这里以 Express 为例，介绍如何在 `api/_app.ts` 中，手写一个中间件，添加权限校验：

package/zh/guides/advanced-features/bff/function.md

@@ -1,18 +1,24 @@
 ---
 sidebar_position: 1
-title: 一体化调用
+title: 基础用法
 ---
 
-Modern.js 允许在 React 组件中直接调用 `api/` 目录下满足一定条件的函数，称为**一体化调用**。
+通过 Modern.js 开发的应用，可以在 `api/` 目录下定义接口函数，前端可以调用这些接口函数，即可发起请求，无需写前后端胶水层代码，同时保证前后端类型安全。
 
-:::note
-使用一体化调用需要先开启 BFF 功能。
-:::
+## 启用 BFF
+
+import EnableBFF from '@site-docs/components/enable-bff.md'
+
+<EnableBFF/>
 
 ## BFF 函数
 
 允许通过一体化调用的函数，称为 **BFF 函数**。这里写一个最简单的 BFF 函数，创建 `api/hello.ts` 文件：
 
+:::caution
+如果是框架模式（有 `api/lambda` 目录），需要创建 `api/lambda/hello.ts`
+:::
+
 ```ts title="api/hello.ts"
 export const get = async () => 'Hello Modern.js';
 ```
@@ -41,7 +47,7 @@ Modern.js 生成器已经在 `tsconfig.json` 中配置 `@api` 别名，因此可
 
 执行 `pnpm run dev` 打开 `http://localhost:8080/` 可以看到页面已经展示了 BFF 函数返回的内容，在 Network 中可以看到页面向 `http://localhost:8080/api/hello` 发送了请求：
 
-![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/hello-modern.png)
+![Network](https://p6-piu.byteimg.com/tos-cn-i-8jisjyls3a/fd41750f8d414179a9b4ecb519919b36~tplv-8jisjyls3a-3:0:0:q75.png)
 
 ## 函数路由
 
@@ -53,32 +59,30 @@ Modern.js 中，BFF 函数对应的路由系统是基于文件系统实现的，
 函数写法和框架写法会在下一节详细介绍。
 :::
 
-以下的 `$BASENAME` 指的是 BFF 函数的[路由前缀](/docs/configure/app/bff/prefix)，可以在 `modern.config.js` 中进行配置，默认值为 `/api`。
+所有 BFF 函数生成的路由都带有统一的前缀，默认值为 `/api`。可以通过 [bff.prefix](/docs/configure/app/bff/prefix) 设置公共路由的前缀。
 
-:::info 注
-可以通过 [bff.prefix](/docs/configure/app/bff/prefix) 设置公共路由的前缀。
-:::
+下面介绍几种路由的约定。
 
 ### 默认路由
 
 以 `index.[jt]s` 命名的文件会被映射到上一层目录。
 
-* `api/index.ts` -> `$BASENAME/`
-* `api/user/index.ts` -> `$BASENAME/user`
+* `api/index.ts` -> `{prefix}/`
+* `api/user/index.ts` -> `{prefix}/user`
 
-### 嵌套路由
+### 多层路由
 
 支持解析嵌套的文件，如果创建嵌套文件夹结构，文件仍会以相同方式自动解析路由。
 
-* `api/hello.ts` -> `$BASENAME/hello`
-* `api/user/list.ts` -> `$BASENAME/user/list`
+* `api/hello.ts` -> `{prefix}/hello`
+* `api/user/list.ts` -> `{prefix}/user/list`
 
 ### 动态路由
 
-同样的，创建命名带有 `[xxx]` 的文件夹或者文件，支持动态的命名路由参数。
+同样的，创建命名带有 `[xxx]` 的文件夹或者文件，支持动态的命名路由参数。动态路由的函数参数规则可以看 [dynamac-path](/docs/guides/advanced-features/bff/function#dynamic-path)
 
-* `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-* `api/user/username/[action].ts` -> `$BASENAME/user/username/:action`
+* `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
+* `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
 
 ### 白名单
 
@@ -102,7 +106,7 @@ Modern.js 的 BFF 函数需要遵循 RESTful API 标准来定义, 遵循 HTTP Me
 
 ### 函数具名导出
 
-Modern.js BFF 函数的导出名决定了函数对应接口的 Method，如`get`，`post`等。
+Modern.js BFF 函数的导出名决定了函数对应接口的 Method，如 `get`，`post` 等。
 
 例如，按照以下例子，可导出一个 GET 接口。
 
@@ -126,9 +130,9 @@ export const post = async () => {
 };
 ```
 
-* 应用工程 中支持了 9 种 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+* 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
-* 名字是大小不敏感的，就是说，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
+* 名字是大小不敏感的，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 
 * 可以在一个文件中定义多个不同 Method 的函数，但如果定义多个相同 Method 的函数，则只有第一个会生效。
 
@@ -140,9 +144,7 @@ export const post = async () => {
 
 如上所述，为了满足 RESTful API 的设计标准，因此 Modern.js 中 BFF 函数需要遵循一定的入参规则。
 
-Modern.js 函数定义分为普通函数与带有 schema 的函数，这一小节先介绍普通函数。
-
-普通函数参数分为两块，分别是请求路径中的动态部分和请求选项 `RequestOption`。
+函数参数分为两块，分别是请求路径中的动态部分和请求选项 `RequestOption`。
 
 #### Dynamic Path
 
@@ -190,6 +192,24 @@ export async function post(
 }
 ```
 
+这里你也可以使用自定义类型：
+```ts title="api/lambda/hello.ts"
+import type { RequestOption } from '@modern-js/runtime/server'
+
+type IQuery = {
+  // some types
+}
+type IData = {
+  // some types
+}
+
+export async function post(
+  { query, data }: { query:IQuery, data:IData }
+) {
+  // do somethings
+}
+```
+
 当函数文件使用动态路由规则时，动态路由会在 `RequestOption` 对象参数前。
 
 ```ts title="api/[sku]/[id]/item.ts"

package/zh/guides/advanced-features/code-split.md

@@ -5,6 +5,10 @@ sidebar_position: 6
 
 代码分割是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
 
+:::info
+使用 Modern.js [约定式路由](/docs/guides/basic-features/routes#约定式路由)时，默认会根据路由组件做代码分割，包裹 `Suspense` 组件，无需自行进行代码分割。
+:::
+
 - `import`
 - `React.lazy`
 - `loadable`
@@ -21,30 +25,14 @@ import("./math").then(math => {
 
 `./math` 路径对应的 JS 模块会被打包到单独的 JS 文件中。
 
-## loadable
-
-使用 `loadable` API，示例如下：
-
-```ts
-import loadable from '@modern-js/runtime/loadable'
-
-const OtherComponent = loadable(() => import('./OtherComponent'));
-
-function MyComponent() {
-  return <OtherComponent />
-}
-```
+## React.lazy
 
-`loadable` 更多用法请见 [loadable API](/docs/apis/app/runtime/utility/loadable)。
+React 官方提供的组件代码分割的方式。
 
-:::info 注
-`loadable` 开箱即用的支持 SSR。
+:::caution
+React 17 及以下版本不支持 SSR，建议 React17 的 SSR 应用使用 loadable。
 :::
 
-## React.lazy
-
-React 官方提供的组件代码分割的方式，**缺点是不支持 SSR**。
-
 ```ts
 import React, { Suspense } from 'react';
 
@@ -66,3 +54,23 @@ function MyComponent() {
 ```
 
 `React.lazy` 更多用法请见 [React lazy](https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy)。
+
+## loadable
+
+使用 `loadable` API，示例如下：
+
+```ts
+import loadable from '@modern-js/runtime/loadable'
+
+const OtherComponent = loadable(() => import('./OtherComponent'));
+
+function MyComponent() {
+  return <OtherComponent />
+}
+```
+
+`loadable` 更多用法请见 [loadable API](/docs/apis/app/runtime/utility/loadable)。
+
+:::info 注
+`loadable` 开箱即用的支持 SSR，但不支持和 Suspense 一起使用，如果是 CSR 项目可以使用 [loadable.lazy](https://loadable-components.com/docs/suspense/)
+:::

package/zh/guides/advanced-features/compatibility.md

@@ -3,13 +3,32 @@ title: 客户端兼容性
 sidebar_position: 5
 ---
 
-## Polyfill 模式
+## Browserslist 配置
+
+Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+
+Modern.js 中默认值如下:
+
+```js
+['> 0.01%', 'not dead', 'not op_mini all']
+```
+
+可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
+
+查看 Modern.js Builder 文档了解更多 [Browserlist](https://modernjs.dev/builder/zh/guide/advanced/browserslist.html) 相关内容。
+
+:::note
+Modern.js 支持配置 [output.overrideBrowserlist](/docs/configure/app/output/override-browserslist) 覆盖默认 browserlist 值。
+:::
+
+
+## Polyfill
 
 ### 编译时 Polyfill
 
 Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js) 引入对应的 Polyfill 代码。
 
-默认情况下会根据项目 [Browserslist](https://github.com/browserslist/browserslist) 的设置情况引入所需的 Polyfill 代码， 这样基本不用再担心项目源码和第三方依赖的 Polyfill 问题了，但是因为包含了一些没有用到的 Polyfill 代码，所以最终的包大小可能会有所增加。
+默认情况下会根据项目 Browserslist 的设置情况引入所需的 Polyfill 代码， 这样基本不用再担心项目源码和第三方依赖的 Polyfill 问题了，但是因为包含了一些没有用到的 Polyfill 代码，所以最终的包大小可能会有所增加。
 
 :::info 注
 对于明确第三方依赖不需要 Polyfill 的场景，可以设置 [`output.polyfill`](/docs/configure/app/output/polyfill) 为 `usage`, 这样 Babel 编译时只会根据代码中使用到的语法引入 Polyfill 代码。
@@ -48,17 +67,8 @@ export default defineConfig({
 
 在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
 
-
 ![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
 
-## Browserslist 配置
-
-Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
-
-Modern.js 中默认值如下:
-
-```js
-['> 0.01%', 'not dead', 'not op_mini all']
-```
-
-可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
+:::caution 注意
+该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
+:::