什么是 @rollup/plugin-buble
@rollup/plugin-buble 是 Rollup.js 的一个插件，它使用 buble 转换 ES6+ 代码为 ES5，从而使得这些代码可以在更多的浏览器中运行。
安装 @rollup/plugin-buble
如果你还没有安装 Rollup.js，需要先全局安装：
npm install rollup -g
然后在项目中安装 @rollup/plugin-buble：
npm install @rollup/plugin-buble --save-dev
使用 @rollup/plugin-buble
在使用 @rollup/plugin-buble 之前，需要在 Rollup.js 的配置文件中设置该插件。下面以一个简单的配置文件为例：
-- -------------------- ---- -------
-- ----------------
------ - ----- - ---- -----------------------
------ -------- ---- --------------------------
------ ------- ---- ------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
----------
-----------
-------
------------- ----------
-------- -----------------
--
-
--在上面的配置文件中，我们使用了 @rollup/plugin-babel 将 ES6+ 代码转换为 ES5。进一步优化，我们还可以使用 @rollup/plugin-buble 来代替 @rollup/plugin-babel，修改后的配置文件如下：
-- -------------------- ---- -------
-- ----------------
------ - ------ - ---- ---------
------ ----- ---- -----------------------
------ ------- -
------ -----------------
------- -
----- -------------------
------- ------
--
-------- -
-------
-
--@rollup/plugin-buble 的选项
@rollup/plugin-buble 提供了一些选项，可以通过在配置文件中传入对象来配置这些选项。下面列举了一些常用的选项：
exclude
类型：string | RegExp
默认值：undefined
忽略指定的文件或文件夹，不进行转换。
buble({
exclude: 'node_modules/**'
})objectAssign
类型：string
默认值：undefined
指定 Object.assign() 的 polyfill 方式。如果不设置该选项，@rollup/plugin-buble 会自动根据 target 环境选择合适的 polyfill。
buble({
objectAssign: 'Object.assign'
})transforms
类型：Object
默认值：undefined
自定义 buble 的转换规则。
buble({
transforms: {
arrow: true,
generator: false
}
})更多选项详见官方文档：https://github.com/rollup/plugins/tree/master/packages/buble
总结
经过本文的介绍，我们学习了 @rollup/plugin-buble 的安装和使用。使用该插件可以让我们更加轻松地将 ES6+ 代码转换为 ES5，从而兼容更多的浏览器。同时，我们还介绍了一些常用的选项，可以根据需要进行配置。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/a-rollup-plugin-buble