Modern.js 支持在项目根目录 package.json
文件中的 browserslist
字段(或单独的 .browserslistrc
文件)指定项目覆盖的目标浏览器范围。该值会被 @babel/preset-env
和 autoprefixer
用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
Modern.js 中默认值如下:
['> 0.01%', 'not dead', 'not op_mini all'];
可以在这里了解如何自定义浏览器范围。
查看 Modern.js Builder 文档了解更多 Browserslist 相关内容。
NOTE
Modern.js 支持配置 output.overrideBrowserslist 覆盖默认 browserslist 值。
Modern.js 在编译时默认通过 core-js 引入对应的 Polyfill 代码。
默认情况下会根据项目 Browserslist 的设置情况引入所需的 Polyfill 代码, 这样基本不用再担心项目源码和第三方依赖的 Polyfill 问题了,但是因为包含了一些没有用到的 Polyfill 代码,所以最终的包大小可能会有所增加。
INFO
对于明确第三方依赖不需要 Polyfill 的场景,可以设置 output.polyfill
为 usage
, 这样 Babel 编译时只会根据代码中使用到的语法引入 Polyfill 代码。
Modern.js 中还提供了基于浏览器 UA 信息的运行时按需 Polyfill 方案,相比于 Babel 优势如下:
可以通过微生成器开启该功能:
? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用「基于 UA 的 Polyfill」功能
执行命令后,在 modern.config.ts
中注册 Polyfill 插件:
import polyfillPlugin from '@modern-js/plugin-polyfill';
export default defineConfig({
plugins: [..., polyfillPlugin()],
});
配置 output.polyfill
为 ua
并且执行 pnpm run build && pnpm run serve
启动服务器后,访问页面可以看到 HTML 产物中包含如下脚本:
<script src="/__polyfill__" crossorigin></script>
在 Chrome 51 下访问页面可以看到 http://localhost:8080/__polyfill__
返回内容如下:
注意
该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。