介绍
在现代的 Web 开发中，我们经常需要将我们的代码打包成可运行在现代浏览器和旧版浏览器的 bundle 文件。为了适配旧版浏览器，我们需要使用一些兼容性处理的工具。其中， Rollup 就是一款非常好用的打包工具，而 @anonym/rollup-plugin-legacy 则是一个兼容性处理的插件。
本篇文章将详细介绍如何使用 @anonym/rollup-plugin-legacy 来处理兼容性问题，为前端开发者提供指导意义和实用的示例代码。
安装
npm install @anonym/rollup-plugin-legacy --save-dev
使用
首先，在 Rollup 配置文件中引入 @anonym/rollup-plugin-legacy。
-- -------------------- ---- -------
-- ----------------
------ ------ ---- -------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
---------
--
--这样配置后，@anonym/rollup-plugin-legacy 将会自动将你的代码转换成支持旧版浏览器的代码。
配置
@anonym/rollup-plugin-legacy 的默认配置已经能够满足大部分场景，但如果需要更精细的控制，也可以进行一些配置。
插件的配置项列表如下。
targets
targets 是一个数组，用来指定需要兼容的浏览器版本。
legacy({
targets: [
'> 1%',
'last 2 versions',
'not ie <= 10',
],
}),以上配置中，targets 指明了需要兼容的浏览器版本为：全球使用份额在 1% 以上、最近两个版本、不包括低于等于 IE 10 版本的浏览器。
babel
babel 用来配置 babel 相关的选项。如果你需要自定义 babel 配置，可以在此进行修改。
legacy({
babel: {
presets: ['@babel/preset-env'],
},
}),以上配置中，babel 指明了使用了 @babel/preset-env 来进行 JS 转译。
corejs
corejs 用来配置 babel 中使用的 core-js 版本。
legacy({
corejs: 3,
}),以上配置中，corejs 指明了使用了 core-js 的 3.x 版本。
示例
以下是一个简单的示例代码，演示如何使用 @anonym/rollup-plugin-legacy。
// src/index.js const add = (a, b) => a + b; console.log(add(1, 2));
-- -------------------- ---- -------
-- ----------------
------ ------ ---- -------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
---------
--
--以上示例中，我们将 src/index.js 文件打包成一个支持旧版浏览器的 bundle.js。
总结
本文介绍了如何使用 @anonym/rollup-plugin-legacy 来处理兼容性问题，并提供了详细的配置说明和示例代码。希望这篇文章对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbe81e8991b448e6346