如何将 polyfill 添加到库中？答案

【问题标题】：How to add a polyfill to a library?如何将 polyfill 添加到库中？
【发布时间】：2021-01-12 06:42:46
【问题描述】：

一直在尝试学习如何创建/分发 npm 包，并且我已经编写了我的第一个库，该库利用了 ResizeObserver API，目前该 API 获得了大约 89.6% 的全球支持。

我想捆绑一个包含 resize-observer-polyfill 以及库之外的文件，因此有人可以将其导入为 import <library-name> from "<library-name>/polyfilled";

我已使用TSDX 生成项目，目前正在发送 index.ts 文件以及 index.d.ts 类型文件。在 index.ts 文件中，有一个内部使用 resize 观察者的函数。

我不确定如何创建设置来处理此问题，以及是否可以仅通过更改配置以包含它来完成（TSDX 使用汇总）或者我需要做其他事情，例如动态导入模块，但不确定这在捆绑包大小方面如何工作，以及是否会添加到整个库大小中。

// index.js
(async () => {
    if (!ResizeObserver in window) {
        const module = await import('resize-observer-polyfill');
        window.ResizeObserver = module.ResizeObserver
    }
}();

// main function exported
export default () => {
    function loadResizeObserver() {
        const ro = new ResizeObserver((entries) => {
            // ...
        })
    }
}

处理向库添加 polyfill 的最佳方法是什么。或者我应该只指向 polyfill 以供消费者在需要时添加？

【问题讨论】：

标签： javascript bundling-and-minification polyfills rollupjs tsdx

【解决方案1】：

我建议不要在库中包含 pollyfill，因为它会增加你的包的大小。

如果最终用户需要，只需添加有关什么以及如何使用 pollyfills 的详细信息，以便需要此支持的开发人员（显然对于旧浏览器）可以非常轻松地添加它。

默认添加会增加大小，对于那些专注于最新版本浏览器的人来说，这将导致未使用的代码。

【讨论】：

动态导入不一定正确，但这里最大的问题是导出是同步的，而导入是异步的，这意味着执行导出的代码将没有 ResizeObserver 可用，以防万一它不见了。但是，是的，只要有可能，我就会将 polyfill 留在库之外，并在 HTML 之上进行适当的舞蹈，如果可能的话。