前言
在前端开发中，我们常常会遇到需要向老旧浏览器兼容的情况。为了解决这个问题，我们可以使用一些 transpile 工具，比如 babel，但是这样会带来一些不必要的开销并且无法很好地解决一些问题。@rollup/plugin-legacy 能够帮助我们直接对代码进行 polyfill 和 shim，从而解决兼容性问题，本文将详细介绍如何使用 @rollup/plugin-legacy 。
安装
使用 npm 进行安装。
npm install -D @rollup/plugin-legacy
配置
在使用 @rollup/plugin-legacy 之前，首先需要安装和配置 rollup 工具，如果你还没有使用过 rollup，你可以先学习一下相关知识，这里不再赘述。
在 rollup 的配置文件中，我们需要使用 @rollup/plugin-legacy 插件来对代码进行 polyfill 和 shim。下面是一个简单的示例配置文件。
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
--------
-------- ---- -----
-------- ----
--
-
--在上面的示例中，我们通过 legacy 插件对代码进行了处理，它使用 targets 属性指定需要兼容的浏览器，使用 noEntry 属性指定不需要 polyfill 和 shim 的代码入口文件。
示例
下面是一个示例代码，它使用了一些 ES6 的语法和一些 API，在一些浏览器中可能会出现问题。
const arr = [1, 2, 3];
const [first, ...rest] = arr;
console.log(first, rest);
const obj = { a: 1, b: 2 };
const entries = Object.entries(obj);
console.log(entries);我们可以使用 @rollup/plugin-legacy 来对它进行处理，在 IE11 中能够正常运行。
总结
@rollup/plugin-legacy 可以帮助我们解决一些浏览器兼容性问题，使得我们的代码可以在一些老旧浏览器上正常运行，从而提高代码的兼容性和稳定性。在使用时可以使用 targets 属性指定需要兼容的浏览器，使用 noEntry 属性指定不需要 polyfill 和 shim 的代码入口文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc5ab5cbfe1ea06119f6