在前端开发中，构建工具是必不可少的。而在构建工具中，rollup 可以打包出更小、更快、更精简的库和应用程序。但是 rollup 配置繁琐、易错，因此我们使用了 npm 包 rollup-helper 来简化配置过程。
安装
我们将使用 npm 安装 rollup-helper，使用以下命令：
--- ------- ------------- ----------
使用
rollup-helper 可以帮助我们简化 rollup 配置过程，只需要在项目根目录下创建 rollup-helper.config.js 文件，并进行如下配置：
----- -- - ------------------------
-------------- - ----
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
-----------
------------
-------- -----
---
--------------
--
--上述代码用于一个 Node.js 应用程序的构建，它将 src/index.js 打包成 CommonJS 模块并输出到 dist/bundle.js。
深入理解
首先，我们引入了 rollup-helper 模块，并通过 rh 函数获取适当的默认配置。然后，我们只需要为我们的构建目标添加更多配置即可。
input 和 output：显而易见，这是 rollup 的输入和输出配置。我们指定了源文件路径以及输出文件的名称（包括路径）和格式（CommonJS）。
plugins：这里我们使用了一系列插件来添加更多的功能：
rh.babel()：用于在打包过程中将 ES2015+ 代码转换为 ES5 代码。这个插件也可以用来帮助你使用 JSX、TypeScript 以及其他供应商扩展语言。rh.resolve()：用于解析被引用的模块并将其转换为本地路径。如果你使用的是 NPM 包，那么这个插件很有用，因为它可以自动转换所有包名为本地路径。rh.commonjs()：将 CommonJS 模块转换为 ES6 模块。这个插件很有用，因为我们打包的目标是 CommonJS 模块，这个插件将 CommonJS 模块转换为 ES6 模块，以确保不需要其他配置就可以轻松地导入它们。
示例代码
下面是一个示例代码。我们将使用一个名为 demo 的目录作为项目根目录，然后在 demo 中创建一个 src 文件夹和一个 index.js 文件，如下所示：
----- --- ---- - --- ------ - --- -------- --- --------
在 src/utils.js 中，我们导出一个名为 add 的函数，它将两个数字相加：
------ ----- --- - --- -- -- - - -
在 src/app.js 中，我们导入这个添加函数，并使用它：
------ - --- - ---- --------- ----- ------ - ------ -- -------------------
在 demo/index.js 中，我们导入这个应用程序并运行它：
------------------------
我们运行以下命令打包项目：
------ -- ----------------
我们将得到一个名为 demo/dist/app.js 的文件，它包含一个名为 add 的函数声明和一个名为的 app 被创建的 app.js 文件。
总结
rollup-helper 是一个非常有用的 npm 包，通过 rollup-helper，我们可以轻松地使用 rollup 打包我们的应用程序和库。以上就是本文介绍的内容，希望对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66303