在前端开发过程中，我们经常需要将多个 JavaScript 模块打包成单个文件，以便在生产环境中使用。Rollup 是一个 JavaScript 模块打包器，与类似于 Webpack 的工具相比，Rollup 更适合打包 JavaScript 库和组件。
而 rollup-plugin-run 则是 Rollup 的一个插件，可以在打包完成后直接运行生成的文件。本文将详细介绍如何使用 npm 包 rollup-plugin-run，以便在开发过程中更快地打包和测试代码。
安装 rollup-plugin-run
在开始使用 rollup-plugin-run 之前，您需要确保已经安装了 Node.js 和 npm。然后，您可以使用下面的命令安装 rollup-plugin-run：
npm install --save-dev rollup-plugin-run
配置 Rollup
在使用 rollup-plugin-run 之前，您需要先配置 Rollup。以下是一个 Rollup 的基本配置文件：
-- -------------------- ---- -------
-- ----------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ----- ---- -----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
----------
-----------
-------
------------- ----------
-------- ---------------------
--
-
-该配置文件告诉 Rollup 去找到入口文件 src/index.js，并使用 Babel 和常见的 Rollup 插件（如 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs）来将代码打包成 CommonJS 格式。
使用 rollup-plugin-run
安装完 rollup-plugin-run 并配置好 Rollup 后，您就可以使用 rollup-plugin-run 来运行生成的文件了。以下是 rollup-plugin-run 的使用步骤：
- 在
plugins数组中添加run()方法，并设置watch选项为.或false：
-- -------------------- ---- -------
-- ----------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ----- ---- -----------------------
------ --- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
----------
-----------
-------
------------- ----------
-------- ---------------------
---
-----
------ ---
--
-
-- 在终端中运行下列命令并等待 Rollup 打包完成：
npx rollup -c
通过上述命令，Rollup 将会按照您在配置文件中的设置（rollup.config.js）打包模块并输出至 dist/bundle.js。
- 运行打包完成的文件：
在命令行中输入以下命令，即可直接运行打包完成的文件：
node dist/bundle.js
当您更改源文件时，rollup-plugin-run 将会重新运行打包和运行步骤，以便您可以看到更改后的结果。
示例代码
以下是一个使用 rollup-plugin-run 打包 JavaScript 模块的示例代码：
-- -------------------- ---- ------- -- ------------ ------ - --- - ---- ------------- ------ -------- -------------- - ------------------- ----------- - ------------------ ---- ------------------
// src/utils.js
export function sum(a, b) {
return a + b;
}当您使用上述的 Rollup 配置文件和 src 文件夹中的代码运行 rollup-plugin-run 后，您将在终端看到以下输出：
3 Hello, World!
如您所见，rollup-plugin-run 是一个非常有用的 Rollup 插件，可以节省您在开发过程中不必要的步骤，提高您的生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56720