简介
在前端开发中，模块打包和转译一直是前端工程师们必须面对的问题。为了解决这个问题，现在有很多工具和库，其中 rollup-plugin-bundle-babel 是一款非常实用的 npm 包，它可以帮助我们把多个 JavaScript 模块打包成一个文件，并且在打包时将代码转译成低版本的 JavaScript 代码。
安装
使用 npm 成功进行全局安装，输入以下命令即可：
npm i rollup-plugin-bundle-babel -g
使用方法
1. 创建项目
首先需要创建一个项目文件夹，并且在里面初始化 npm，命令如下：
mkdir rollup-plugin-bundle-babel-demo cd rollup-plugin-bundle-babel-demo npm init -y
2. 安装 rollup 和 rollup-plugin-bundle-babel 包
进入项目文件夹，使用以下命令安装 rollup 和 rollup-plugin-bundle-babel 包：
npm i rollup rollup-plugin-bundle-babel -D
3. 配置文件
创建配置文件 rollup.config.js，代码如下：
-- -------------------- ---- -------
------ ----- ---- -----------------------------
------ ------- -
------ --------------
------- -
----- -----------------
----- -----------
------- ------
--
-------- -
-------
-------- -----------------
--
-
--解释一下配置信息：
- input：打包入口文件
- output：输出信息
- plugins：使用 babel 插件，exclude 选项表示排除所有 node_modules 文件夹中的文件不进行编译
4. 编写代码
在 src 文件夹中创建 main.js 和 hello.js 两个文件，代码如下：
main.js:
import { sayHello } from './hello.js';
const name = 'Lydia';
sayHello(name);hello.js:
export const sayHello = (name) => {
console.log(`Hello ${name}!`);
}5. 执行打包命令
使用以下命令执行打包，即可在 dist 文件夹中生成打包后的文件 bundle.js：
npx rollup -c
6. 在 HTML 中使用
在 HTML 中导入打包后的文件即可使用，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------- ------------
------- --------------------------------
-------
------
--------- ----------
-------
-------打开浏览器即可看到 "Hello Lydia" 的输出。
总结
rollup-plugin-bundle-babel 是一个非常实用的 npm 包，它可以帮助我们解决多个 JavaScript 模块打包的问题，并且在打包时进行转译，让代码兼容低版本的 JavaScript 运行环境。
通过本文的介绍，相信大家已经掌握了如何使用 rollup-plugin-bundle-babel 进行打包和转译的流程和方法。在实际工作中，我们可以针对自己的项目进行适当的调整和优化，来提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61718