---
title: 客户端兼容性
---

前两个小节我们学习了如何使用 ES6+ 与 TypeScript 语法来编写应用。

这一小节，我们来学习如何在 Modern.js 中解决客户端兼容性的问题。

在实际项目中，往往会因为需要兼容老版本浏览器，而无法利用现代浏览器的最新特性与最佳实践。

Modern.js 提供了开箱即用的解决客户端兼容性的能力，支持自动 Polyfill、Browserlist 配置、差异化分发。

我们首先使用微生成器开启该功能：

```bash
? 请选择你想要的操作：启用可选功能
? 启用可选功能：启用「基于 UA 的 Polyfill」功能
```

接着我们修改 `modern.config.js`，添加以下配置：

```js title="modern.config.js"
export default defineConfig({
  output: {
    polyfill: 'ua',
  },
});
```

以上配置将会开启「 自动 Polyfill 」，Modern.js 会根据浏览器对规范的支持程度，返回不同内容的 polyfill，我们不需要再担心低版本浏览器对新版本浏览器的拖累。

执行 `pnpm run dev`，可以看到浏览器中请求了当前服务上 `/__polyfill__` 这一资源，但是当前请求到的资源是空的：

![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result1.png)

我们切换到 Chrome Mobile 模式，选择设备为 iPhome 5/SE，重新刷新页面，可以看到请求到了有内容的资源：

![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result2.png)

:::info 注
如果遇到无法识别的浏览器，Modern.js 将会返回全量的 polyfill。
:::

接下里我们继续修改 `modern.config.js`：

```js title="modern.config.js"
export default defineConfig({
  output: {
    enableModernMode: true,
    polyfill: 'ua',
  },
});
```

以上配置将会开启「 差异化分发 」，在原生支持模块功能的浏览器中，Modern.js 优先使用带有 ESM 模块语法静态资源的 HTML，浏览器能够最优化的加载模块，带来更好的页面性能。

执行 `pnpm run build && pnpm run start`，打开页面，可以看到已经加载了带有 `-es6` 后缀的资源文件：

![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result3.png)

:::info 注
更多相关内容可以查看 [**客户端兼容性**](/docs/guides/usages/basic-configuration/compatibility)。
:::

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern-3)。