@modern-js/main-doc 2.60.0 → 2.60.1

package/docs/en/configure/app/tools/webpack.mdx

@@ -4,6 +4,299 @@ title: webpack
 
 # tools.webpack
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/webpack.md';
+- **Type:** `Object | Function | undefined`
+- **Default:** `undefined`
+- **Bundler:** `only support webpack`
 
-<Main />
+`tools.webpack` is used to configure [webpack](https://webpack.js.org/).
+
+> `tools.bundlerChain` is also used to modify the webpack configuration, and the function is more powerful. It is recommended to use `tools.bundlerChain` first.
+
+### Object Type
+
+`tools.webpack` can be configured as an object to be deep merged with the built-in webpack configuration through [webpack-merge](https://github.com/survivejs/webpack-merge).
+
+For example, add `resolve.alias` configuration:
+
+```js
+export default {
+  tools: {
+    webpack: {
+      resolve: {
+        alias: {
+          '@util': 'src/util',
+        },
+      },
+    },
+  },
+};
+```
+
+### Function Type
+
+`tools.webpack` can be configured as a function. The first parameter of this function is the built-in webpack configuration object, you can modify this object, and then return it. For example:
+
+```js
+export default {
+  tools: {
+    webpack: config => {
+      config.resolve.alias['@util'] = 'src/util';
+      return config;
+    },
+  },
+};
+```
+
+:::tip
+The object returned by the `tools.webpack` function is used directly as the final webpack configuration and is not merged with the built-in webpack configuration.
+:::
+
+### Utils
+
+The second parameter of this function is an object, which contains some utility functions and properties, as follows:
+
+#### env
+
+- **Type:** `'development' | 'production' | 'test'`
+
+The `env` parameter can be used to determine whether the current environment is development, production or test. For example:
+
+```js
+export default {
+  tools: {
+    webpack: (config, { env }) => {
+      if (env === 'development') {
+        config.devtool = 'cheap-module-eval-source-map';
+      }
+      return config;
+    },
+  },
+};
+```
+
+#### isProd
+
+- **Type:** `boolean`
+
+The `isProd` parameter can be used to determine whether the current environment is production. For example:
+
+```js
+export default {
+  tools: {
+    webpack: (config, { isProd }) => {
+      if (isProd) {
+        config.devtool = 'source-map';
+      }
+      return config;
+    },
+  },
+};
+```
+
+#### target
+
+- **Type:** `'web' | 'node' | 'modern-web' | 'web-worker'`
+
+The `target` parameter can be used to determine the current target. For example:
+
+```js
+export default {
+  tools: {
+    webpack: (config, { target }) => {
+      if (target === 'node') {
+        // ...
+      }
+      return config;
+    },
+  },
+};
+```
+
+#### isServer
+
+- **Type:** `boolean`
+
+Determines whether the target environment is `node`, equivalent to `target === 'node'`.
+
+```js
+export default {
+  tools: {
+    webpack: (config, { isServer }) => {
+      if (isServer) {
+        // ...
+      }
+      return config;
+    },
+  },
+};
+```
+
+#### isWebWorker
+
+- **Type:** `boolean`
+
+Determines whether the target environment is `web-worker`, equivalent to `target === 'web-worker'`.
+
+```js
+export default {
+  tools: {
+    webpack: (config, { isWebWorker }) => {
+      if (isWebWorker) {
+        // ...
+      }
+      return config;
+    },
+  },
+};
+```
+
+#### webpack
+
+- **Type:** `typeof import('webpack')`
+
+The webpack instance. For example:
+
+```js
+export default {
+  tools: {
+    webpack: (config, { webpack }) => {
+      config.plugins.push(new webpack.ProgressPlugin());
+      return config;
+    },
+  },
+};
+```
+
+#### HtmlWebpackPlugin
+
+- **Type:** `typeof import('html-webpack-plugin')`
+
+The HtmlWebpackPlugin instance:
+
+```js
+export default {
+  tools: {
+    webpack: (chain, { HtmlWebpackPlugin }) => {
+      console.log(HtmlWebpackPlugin);
+    },
+  },
+};
+```
+
+#### addRules
+
+- **Type:** `(rules: RuleSetRule | RuleSetRule[]) => void`
+
+Add additional [webpack rules](https://webpack.js.org/configuration/module/#modulerules).
+
+For example:
+
+```ts
+export default {
+  tools: {
+    webpack: (config, { addRules }) => {
+      // add a single rule
+      addRules({
+        test: /\.foo/,
+        loader: require.resolve('foo-loader'),
+      });
+
+      // Add multiple rules as an array
+      addRules([
+        {
+          test: /\.foo/,
+          loader: require.resolve('foo-loader'),
+        },
+        {
+          test: /\.bar/,
+          loader: require.resolve('bar-loader'),
+        },
+      ]);
+    },
+  },
+};
+```
+
+#### prependPlugins
+
+- **Type:** `(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void`
+
+Add additional plugins to the head of the internal webpack plugins array, and the plugin will be executed first.
+
+```ts
+export default {
+  tools: {
+    webpack: (config, { prependPlugins, webpack }) => {
+      // add a single plugin
+      prependPlugins(
+        new webpack.BannerPlugin({
+          banner: 'hello world!',
+        }),
+      );
+
+      // Add multiple plugins
+      prependPlugins([new PluginA(), new PluginB()]);
+    },
+  },
+};
+```
+
+#### appendPlugins
+
+- **Type:** `(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void`
+
+Add additional plugins at the end of the internal webpack plugins array, the plugin will be executed last.
+
+```ts
+export default {
+  tools: {
+    webpack: (config, { appendPlugins, webpack }) => {
+      // add a single plugin
+      appendPlugins([
+        new webpack.BannerPlugin({
+          banner: 'hello world!',
+        }),
+      ]);
+
+      // Add multiple plugins
+      appendPlugins([new PluginA(), new PluginB()]);
+    },
+  },
+};
+```
+
+#### removePlugin
+
+- **Type:** `(name: string) => void`
+
+Remove the internal webpack plugin, the parameter is the `constructor.name` of the plugin.
+
+For example, remove the internal [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin):
+
+```ts
+export default {
+  tools: {
+    webpack: (config, { removePlugin }) => {
+      removePlugin('ForkTsCheckerWebpackPlugin');
+    },
+  },
+};
+```
+
+#### mergeConfig
+
+- **Type:** `(...configs: WebpackConfig[]) => WebpackConfig`
+
+Used to merge multiple webpack configs, same as [webpack-merge](https://github.com/survivejs/webpack-merge).
+
+```ts
+export default {
+  tools: {
+    webpack: (config, { mergeConfig }) => {
+      return mergeConfig(config, {
+        devtool: 'eval',
+      });
+    },
+  },
+};
+```

package/docs/en/guides/advanced-features/_meta.json

@@ -14,7 +14,6 @@
   },
   "build-performance",
   "compatibility",
-  "eslint",
   "low-level",
   "source-build",
   "web-server"

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Using Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/en/shared/rspackTip.mdx';
+import Rspack from '@site-docs-en/components/rspackTip.mdx';
 
 <Rspack />
 
@@ -42,7 +42,7 @@ export default defineConfig({
 If your current version is lower than MAJOR_VERSION.59.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
-import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
+import RspackPrecautions from '@site-docs-en/components/rspackPrecautions.mdx';
 
 <RspackPrecautions />
 

package/docs/en/guides/basic-features/css/css-modules.mdx

@@ -2,7 +2,7 @@
 
 [CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts.
 
-Builder supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the `[name].module.css` filename to enable CSS Modules.
+Modern.js supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the `[name].module.css` filename to enable CSS Modules.
 
 The following style files are considered CSS Modules:
 
@@ -163,7 +163,7 @@ After adding the type declaration, if the type error still exists, you can try t
 
 Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file.
 
-Builder supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
+Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
 
 ```ts
 export default {

package/docs/en/guides/basic-features/output-files.mdx

@@ -42,7 +42,7 @@ In the filename, `[name]` represents the entry name corresponding to this file,
 
 ## Modify the Directory
 
-Builder provides some configs to modify the directory or filename, you can:
+Modern.js provides some configs to modify the directory or filename, you can:
 
 - Modify the filename through [output.filename](/configure/app/output/filename).
 - Modify the output path of through [output.distPath](/configure/app/output/dist-path).

package/docs/en/guides/basic-features/render/ssg.mdx

@@ -205,4 +205,4 @@ In the above configuration, the `x-tt-env` request header is set for all routes,
 
 :::tip
 Headers set in routes will override headers set for entries.
-:::
+:::

package/docs/en/guides/concept/builder.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Build Engine
 
-Modern.js internally encapsulates its own build tool (Modern.js Builder) based on [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
+Modern.js internally encapsulates [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
 
 ::: tip What is Rsbuild?
 Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-use, and ready-to-use out of the box.

package/docs/en/guides/get-started/glossary.mdx

@@ -12,13 +12,13 @@ The BFF service acts as an intermediary between the frontend application and the
 
 ## Bundler
 
-import Bundler from '@modern-js/builder-doc/docs/en/shared/bundler.md';
+import Bundler from '@site-docs-en/components/bundler.mdx';
 
 <Bundler />
 
 ## Builder
 
-import Builder from '@modern-js/builder-doc/docs/en/shared/builder.md';
+import Builder from '@site-docs-en/components/builder.mdx';
 
 <Builder />
 
@@ -36,25 +36,25 @@ Starting from the architecture level, it combines multiple independently deliver
 
 ## Micro-frontend
 
-import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';
+import MicroFrontend from '@site-docs-en/components/micro-frontend.mdx';
 
 <MicroFrontend />
 
 ## Module Federation
 
-import ModuleFederation from '@modern-js/builder-doc/docs/en/shared/module-federation.md';
+import ModuleFederation from '@site-docs-en/components/module-federation.mdx';
 
 <ModuleFederation />
 
 ## Rsbuild
 
-import Rsbuild from '@modern-js/builder-doc/docs/en/shared/rsbuild.md';
+import Rsbuild from '@site-docs-en/components/rsbuild.mdx';
 
 <Rsbuild />
 
 ## Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';
+import Rspack from '@site-docs-en/components/rspack.mdx';
 
 <Rspack />
 
@@ -76,6 +76,6 @@ Compared to traditional SSR, SSG can provide faster loading speeds and less serv
 
 ## SWC
 
-import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
+import SWC from '@site-docs-en/components/swc.mdx';
 
 <SWC />

package/docs/en/guides/get-started/quick-start.mdx

@@ -70,7 +70,7 @@ In a newly created project, the `@modern-js/app-tools` npm package is installed
 
 - It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
 - It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
-- It integrates Modern.js Builder, providing build capabilities.
+- It integrates Rsbuild, providing build capabilities.
 - It integrates Modern.js Server, providing capabilities for development and production servers.
 
 `@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:

package/docs/en/guides/topic-detail/_meta.json

@@ -10,11 +10,5 @@
     "name": "model",
     "label": "reduck",
     "collapsed": true
-  },
-  {
-    "type": "dir",
-    "name": "generator",
-    "label": "generator",
-    "collapsed": true
   }
 ]

package/docs/en/guides/topic-detail/micro-frontend/c01-introduction.mdx

@@ -5,7 +5,7 @@ title: Introduction
 
 # Introduction
 
-import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';
+import MicroFrontend from '@site-docs-en/components/micro-frontend.mdx';
 
 <MicroFrontend />
 

package/docs/en/guides/topic-detail/model/quick-start.mdx

@@ -2,6 +2,11 @@
 sidebar_position: 1
 title: Quick Start
 ---
+
+:::caution
+New projects are no longer recommended to use Reduck. You can use state management tools from the community, such as [Jotai](https://jotai.org/), [zustand](https://zustand.docs.pmnd.rs/getting-started/introduction), [valtio](https://valtio.dev/docs/introduction/getting-started), etc.
+:::
+
 # Quick Start
 
 import ReduckMigration from "@site-docs-en/components/reduck-migration"

package/docs/en/guides/troubleshooting/builder.mdx

@@ -40,8 +40,8 @@ Modern.js provides [inspect command](https://modernjs.dev/en/apis/app/commands.h
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Rspack Config (web): /root/my-project/dist/rspack.config.web.js
+  - Builder Config: /root/my-project/dist/rsbuild.config.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
 ```
 
 ---

package/docs/en/plugin/cli-plugins/plugin-swc.mdx

@@ -11,7 +11,7 @@ Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for mo
 
 :::
 
-import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
+import SWC from '@site-docs-en/components/swc.mdx';
 
 <SWC />
 
@@ -51,9 +51,9 @@ For a detailed comparison between minifiers, see [minification-benchmarks](https
 
 ### Used in Modern.js framework
 
-The Modern.js framework integrates the Builder's SWC plugin, and you can use it in the following ways:
+The Modern.js framework integrates the SWC plugin, and you can use it in the following ways:
 
-import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
+import EnableSWC from '@site-docs-en/components/enableSwc.mdx';
 
 <EnableSWC />
 
@@ -297,7 +297,7 @@ This is ported by Next.js team from [@emotion/babel-plugin](https://www.npmjs.co
 #### extensions.pluginImport
 
 :::tip
-Builder provides the [source.transformImport](/configure/app/source/transform-import) config, so you don't need to configure `extensions.pluginImport` manually.
+Modern.js provides the [source.transformImport](/configure/app/source/transform-import) config, so you don't need to configure `extensions.pluginImport` manually.
 :::
 
 Ported from [babel-plugin-import](https://github.com/umijs/babel-plugin-import), configurations are the same.

package/docs/en/plugin/rsbuild-plugins/plugin-esbuild.mdx

@@ -11,7 +11,7 @@ Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for mo
 
 :::
 
-import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
+import Esbuild from '@site-docs-en/components/esbuild.mdx';
 
 <Esbuild />
 
@@ -19,7 +19,7 @@ import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
 
 ### Used in Modern.js framework
 
-The Modern.js framework integrates the Builder's esbuild plugin by default, so you don't need to manually install and register the plugin, just use the [tools.esbuild](https://modernjs.dev/en/configure/app/tools/esbuild.html) configuration:
+The Modern.js framework integrates the esbuild plugin by default, so you don't need to manually install and register the plugin, just use the [tools.esbuild](https://modernjs.dev/en/configure/app/tools/esbuild.html) configuration:
 
 ```js
 export default defineConfig({
@@ -102,7 +102,7 @@ builderPluginEsbuild({
 
 #### Disable transformation
 
-Set `loader` to `false` to disable esbuild transformation, and Builder will continue to use Babel to transform the code.
+Set `loader` to `false` to disable esbuild transformation, and Modern.js will continue to use Babel to transform the code.
 
 ```ts
 builderPluginEsbuild({
@@ -146,7 +146,7 @@ builderPluginEsbuild({
 
 #### Disable minification
 
-Set `minimize` to `false` to disable esbuild minification, and Builder will continue to use Terser to minify the code.
+Set `minimize` to `false` to disable esbuild minification, and Modern.js will continue to use Terser to minify the code.
 
 ```ts
 builderPluginEsbuild({

package/docs/zh/apis/app/commands.mdx

@@ -249,21 +249,3 @@ Inspect config succeed, open following files to view the content:
   - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
   - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
-
-## modern lint
-
-运行 `ESLint` 进行代码语法检查。
-
-```bash
-Usage: modern lint [options] [...files]
-
-lint and fix source files
-
-Options:
-  --no-fix    disable auto fix source file
-  -h, --help  display help for command
-```
-
-通常情况下，我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
-
-- 设置 `--no-fix` 参数后可以关闭自动修复 lint 错误代码的能力。

package/docs/zh/community/contributing-guide.mdx

@@ -185,7 +185,6 @@ pnpm run lint
 root
 └─ packages
    └─ document
-       ├─ builder-doc    # Modern.js Builder 文档
        ├─ main-doc       # Modern.js Framework 文档
        └─ module-doc     # Modern.js Module 文档
 ```

package/docs/zh/components/builder.mdx

@@ -0,0 +1,3 @@
+Builder 指的是 Modern.js 的构建层，它的目标是为 Modern.js 用户提供开箱即用的构建能力，并支持在 webpack 和 Rspack 间无缝切换。
+
+Modern.js `MAJOR_VERSION.46.0` 之前版本使用的是 `@modern-js/builder`, 从 `MAJOR_VERSION.46.0` 开始升级为 [Rsbuild](https://rsbuild.dev/)。

package/docs/zh/components/bundler.mdx

@@ -0,0 +1,4 @@
+
+指 [webpack](https://webpack.js.org/)、[Rspack](https://www.rspack.dev/) 等模块打包工具。
+
+打包工具的主要目标是将 JavaScript、CSS 等文件打包在一起，打包后的文件可以在浏览器、Node.js 等环境中使用。当 Bundler 处理 Web 应用时，它会构建一个依赖关系图，其中包含应用需要的各个模块，然后将所有模块打包成一个或多个 bundle。

package/docs/zh/components/enableSwc.mdx

@@ -0,0 +1,17 @@
+首先，你需要执行 `pnpm run new` 启用 SWC 编译：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「SWC 编译」
+```
+
+执行完成后，你只需在 `modern.config.ts` 文件中注册 Modern.js 的 SWC 插件，即可启用 SWC 编译和压缩能力。
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { swcPlugin } from '@modern-js/plugin-swc';
+
+export default defineConfig({
+  plugins: [appTools(), swcPlugin()],
+});
+```

package/docs/zh/components/esbuild.mdx

@@ -0,0 +1,3 @@
+[esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具，具有打包、编译和压缩 JavaScript 代码的功能，相比传统的打包编译工具，esbuild 在性能上有显著提升。在代码压缩方面，相比 webpack 内置的 terser 压缩器，esbuild 在性能上有数十倍的提升。
+
+Modern.js 提供了 esbuild 插件，让你能使用 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。在大型工程中启用 esbuild 后，**可以大幅度减少代码编译和压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。

package/docs/zh/components/micro-frontend.mdx

@@ -0,0 +1,6 @@
+微前端（Micro-frontend，简称 MFE）是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，它将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
+
+它主要解决了两个问题：
+
+- 随着项目迭代应用越来越庞大，难以维护。
+- 跨团队或跨部门协作开发项目导致效率低下的问题。

package/docs/zh/components/module-federation.mdx

@@ -0,0 +1,7 @@
+模块联邦（Module Federation，简称 MF）是 Webpack 的一个特性。它允许 JavaScript 应用从另一个应用动态加载代码，并在此过程中共享依赖关系。如果使用联邦模块的应用缺少联邦代码所需的依赖项，Webpack 将从该联邦的构建源下载缺失的依赖项。
+
+这使得可以创建微前端风格的应用程序，多个系统可以共享代码，并在不需要重新构建整个应用程序的情况下进行动态更新。
+
+Modern.js 提供了一个 Module Federation 的示例项目，请参考 [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs)。
+
+你也可以阅读 [webpack Module Federation 文档](https://webpack.docschina.org/concepts/module-federation/) 来了解更多概念。

package/docs/zh/components/nodeVersion.mdx

@@ -0,0 +1,28 @@
+在开始使用前，你需要安装 [Node.js](https://nodejs.org/)，并保证 Node.js 版本不低于 16.2.0，**我们推荐使用 Node.js 18 的 LTS 版本**。
+
+你可以通过以下命令检查当前使用的 Node.js 版本：
+
+```bash
+node -v
+```
+
+如果你当前的环境中尚未安装 Node.js，或是安装的版本低于 16，可以通过 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/Schniz/fnm) 安装需要的版本。
+
+下面是通过 nvm 安装 Node.js 18 LTS 版本的例子：
+
+```bash
+# 安装 Node.js 18 的长期支持版本
+nvm install 18 --lts
+
+# 将刚安装的 Node.js 18 设置为默认版本
+nvm alias default 18
+
+# 切换到刚安装的 Node.js 18
+nvm use 18
+```
+
+:::tip nvm 和 fnm
+nvm 和 fnm 都是 Node.js 版本管理工具。相对来说，nvm 较为成熟和稳定，而 fnm 是使用 Rust 实现的，比 nvm 提供了更好的性能。
+:::
+
+此外，在安装 nvm 或 fnm 后，然后只要仓库根目录下有内容为 `lts/hydrogen` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。

package/docs/zh/components/output-polyfill-extend.mdx

@@ -0,0 +1 @@
+Modern.js 还支持了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，具体使用姿势可查看 [运行时按需 Polyfill](/guides/advanced-features/compatibility.html#运行时按需-polyfill)