在前端开发中，打包工具是必不可少的。而近年来，Rollup 成为了一个备受欢迎的打包工具，其优点就不必多言了。但是， 如果您希望在项目中使用 ES6，那么 Rollup 的原生支持显然不够，这时候就需要用到一些附加的插件了。常用的例如 rollup-plugin-babel 是一个非常实用的转码工具，可以帮助我们将 ES6 代码转换为 ES5 代码，并且支持一些其他的功能。今天，我将为大家介绍一个基于 rollup-plugin-babel 的进阶版本—— @zaygraveyard/rollup-plugin-babel，并提供详细的使用教程及示例代码。
安装
首先，你需要在你的项目中安装 @zaygraveyard/rollup-plugin-babel。这可以通过 npm 来实现：
npm install @zaygraveyard/rollup-plugin-babel --save-dev
安装成功之后，我们需要做一些配置。
配置
在 rollup 的配置文件中，我们需要将 @zaygraveyard/rollup-plugin-babel 添加到插件列表中，并配置一些参数。接下来是一个简单的配置示例：
-- -------------------- ---- -------
------ ----------- ---- ------------------------------------
----- ------- - -
-------------
----------- --------
-------- ------------------------------------------- ---------------------------------------------
-------- -----------------
--
--
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
--------
--这份配置文件做了以下几件事情：
- 引用
@zaygraveyard/rollup-plugin-babel，并定义了一个包含该插件的plugins数组。 - 配置了
extensions参数，帮助该插件处理.js文件。 - 配置了
plugins参数，指定了使用的 babel 插件。 - 配置了
exclude参数，指定需要被排除的文件。
具体参数的使用方法可以参考官方文档。在配置完成后，我们就可以使用该插件进行打包了。
使用
使用 @zaygraveyard/rollup-plugin-babel 打包的方法与常用的 rollup-plugin-babel 相似，我们对文件进行编译后，再输出成 es5 代码。例如，在我们的 index.js 文件中编写了如下代码：
-- -------------------- ---- -------
----- ------- -
------------------ -
---------- - -
------ -----------
-
-
-------- -
------ ---- ----- -- ---------------------
-
-然后通过以下命令进行打包：
rollup -c
最终会生成一个目标文件，该文件中的代码已经被转成了以下形式：
-- -------------------- ---- -------
---- --------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
--- ------- - -------- -------------- -
---------- - -
------ -----------
--
--
------------------------ - -------- -- -
------ ---- ----- -- - - -----------------
--
-------------- - --------如此便可成功进行编译。
参考代码
最后，我在这里贴上一份完整的参考代码，以方便大家启动学习。
-- -------------------- ---- -------
-- ----------------
------ ----------- ---- ------------------------------------
----- ------- - -
-------------
-- ----------
----------- --------
-------- ------------------------------------------- ---------------------------------------------
-------- -----------------
--
--
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
--------
---- -------------------- ---- -------
-- ------------
----- ------- -
------------------ -
---------- - -
------ -----------
-
-
-------- -
------ ---- ----- -- ---------------------
-
-
-------------- - --------// 命令行执行 npm install @zaygraveyard/rollup-plugin-babel -D rollup -c
总结
@zaygraveyard/rollup-plugin-babel 是一个非常好的 Rollup 插件，它提供了一种快捷的方式将 ES6 代码转换为 ES5 代码。同时，在配置参数的时候，我们可以通过传入多种插件和配置参数来达到自己想要的效果。新手可能在一开始对这个插件的使用感到困惑，但是只需要掌握一些基本的配置，你便可以完全操控它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005720881e8991b448e8498