简介
在前端开发中，我们经常会使用打包工具将多个JavaScript文件合并成一个文件，减少http请求数并优化网站性能。其中， Rollup 是一个专门用于打包 JavaScript 库的工具。它对ES6模块有天然支持，能够处理循环依赖，生成的包大小更小, 移除了从其他库中引入的未使用代码。而 @trusktr/rollup-plugin-babel 则是一个使用Rollup打包时用来将文件转换成ES6语法的插件。
安装
可以使用 npm 直接安装此插件：
npm install @trusktr/rollup-plugin-babel --save-dev
使用方法
在 Rollup 配置文件 中，先导入该插件：
import babel from '@trusktr/rollup-plugin-babel';
然后在 plugins 数组中添加该插件的实例：
-- -------------------- ---- -------
----- ------ - -
-- ---
-------- -
-- ---
-------
-- -------
---
-- ---
-
-- ---
--配置选项
@trusktr/rollup-plugin-babel 的配置选项和 @babel/preset-env 的一样，可以通过在配置中传递一个对象来配置。
以下是一些示例配置选项：
使用最新的 JavaScript
babel({
presets: [
['@babel/preset-env', { modules: false }]
]
})使用自定义配置
-- -------------------- ---- -------
-------
-------- -
--------------------- -
-------- ------
-------- -
--------- ------ - ------ ----------
-
--
-
--如果需要更详细的配置选项，可以查看 @babel/preset-env 的文档。
示例代码
下面是使用 @trusktr/rollup-plugin-babel 插件和 Rollup 打包的一个简单示例，将所有.js文件转为ES6语法：
rollup.config.js
-- -------------------- ---- -------
------ ----- ---- -------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
-------
-------- -----------------
--
-
--其中，input 是入口文件，output 是输出文件；exclue 参数表示忽略掉 node_modules 里的所有代码。
总结
@trusktr/rollup-plugin-babel 能够让我们在使用 Rollup 打包时将代码转换为 ES6 语法，这样能够提高代码的可读性和可维护性。同时，我们还可以通过 @babel/preset-env 来进一步配置插件的选项。
当然，这些只是最基本的应用方法和配置，对于更高级和复杂的应用场景，还需进一步学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726481e8991b448e8946