客户端兼容性

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

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

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

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

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

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

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

modern.config.js

export default defineConfig({
  output: {
    polyfill: 'ua',
  },
});

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

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

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

注

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

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

modern.config.js

export default defineConfig({
  output: {
    enableModernMode: true,
    polyfill: 'ua',
  },
});

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

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

注

更多相关内容可以查看 客户端兼容性。

---

本小节的代码可以在这里查看。