在前端开发中，构建工具是必不可少的。而在构建工具中，rollup 可以打包出更小、更快、更精简的库和应用程序。但是 rollup 配置繁琐、易错，因此我们使用了 npm 包 rollup-helper 来简化配置过程。
安装
我们将使用 npm 安装 rollup-helper，使用以下命令：
npm install rollup-helper --save-dev
使用
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 文件，如下所示：
demo/ ├── src/ │ ├── app.js │ └── utils.js └── index.js
在 src/utils.js 中，我们导出一个名为 add 的函数，它将两个数字相加：
export const add = (a, b) => a + b
在 src/app.js 中，我们导入这个添加函数，并使用它：
import { add } from './utils' const result = add(1, 2) console.log(result)
在 demo/index.js 中，我们导入这个应用程序并运行它：
require('./dist/app.js')
我们运行以下命令打包项目：
rollup -c rollup.config.js
我们将得到一个名为 demo/dist/app.js 的文件，它包含一个名为 add 的函数声明和一个名为的 app 被创建的 app.js 文件。
总结
rollup-helper 是一个非常有用的 npm 包，通过 rollup-helper，我们可以轻松地使用 rollup 打包我们的应用程序和库。以上就是本文介绍的内容，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66303
