rollup-plugin-babel 是一个 Rollup 插件，用于在打包时将 ES6+ 代码转换为浏览器可识别的 ES5 代码。本文将介绍如何使用 rollup-plugin-babel，旨在帮助前端开发者更好地理解和应用该插件。
安装
首先，需要确保已经安装 rollup 和 babel，如果没有，请执行以下命令进行安装：
--- ------- ---------- ------ ---------- ------------------------------ ----------------
接着，安装 rollup-plugin-babel：
--- ------- ---------- -------------------
配置
在使用 rollup-plugin-babel 之前，需要在项目根目录下创建 .babelrc 文件，并添加以下配置：
-
---------- -
------- -
---------- ------
---------- -
----------- --- ---- ----- - ---------- ---- -- -- ---
-
--
--
---------- -
-------------------
-
-这里的配置意思是使用 babel-preset-env 来转换代码，并且不编译 ES6 模块语法（因为 Rollup 自带 ES6 模块支持），同时只支持市场份额超过 1% 的浏览器、最新的两个版本以及 IE8 及以上浏览器。
使用
在 rollup.config.js 中引入 rollup-plugin-babel 并配置：
------ ----- ---- ----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-------
-
--这里的配置意思是将 src/index.js 打包成一个 UMD 格式的文件，并使用 babel 插件进行代码转换。
示例代码
下面是一个简单的示例，假设有一个 src/index.js 文件，内容如下：
----- ------ - --- -- - - -- ------ ------- -------
执行 rollup -c 命令进行打包后，会得到一个 dist/bundle.js 文件。如果打开该文件，可以看到转换后的代码：
--------- -------- -------- -
------ ------- --- -------- -- ------ ------ --- ----------- - -------------- - --------- -
------ ------ --- ---------- -- ---------- - --------------- -
---------------- - -----------
------- --------- -- - ---- --------
--- ------ - -------- --------- -
------ - - --
--
------ -------
-----总结
本文介绍了如何使用 rollup-plugin-babel 进行代码转换，并提供了详细的配置和示例代码。希望能够帮助前端开发者更好地理解和应用该插件，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51511