在前端开发中，我们通常需要处理和整合多个 JavaScript 模块和库。Rollup 是一个支持多种模块和包类型、可定制化和高效的 JavaScript 模块打包器。而 @trueadm/rollup 是一个定制化的 Rollup 插件，可以帮助我们更加方便地处理 JavaScript 模块的打包和优化。
本文将介绍如何安装和使用 @trueadm/rollup，以及常见的定制化配置方法。同时，也会涉及一些 Rollup 相关的基础概念和技术。
安装和使用
首先，我们需要在项目中安装 @trueadm/rollup 和 Rollup：
npm install -D rollup @trueadm/rollup
其中，-D 表示我们将这两个包安装在项目的开发依赖中。
接下来，我们可以为项目创建一个简单的配置文件，例如 rollup.config.js：
-- -------------------- ---- -------
----- - ------ - - ---------------------------
-------------- - --------
------ ---------------
------- -
----- -----------------
------- -------
--
---在上面的配置中，我们使用 rollup 函数来创建一个 Rollup 插件实例。该实例的参数是一个配置对象，其中：
input表示源代码的入口点。output表示打包结果的输出配置，包括输出文件的路径、文件类型等。
我们可以通过 rollup.config.js 直接运行 Rollup：
npx rollup -c
这会在 dist/bundle.js 创建一份包含我们所有源代码的 JavaScript 文件。
配置选项
除了上述的 input 和 output 配置，我们还可以在 @trueadm/rollup 中使用许多其他选项，以便更好地满足我们的需求。以下是一些常见选项：
plugins
plugins 选项是一个属于 @trueadm/rollup 的配置参数，被用于向样式获取方式可以定制化的过程中，同时生成 sourcemaps 和使用缓存，包括：
-- -------------------- ---- -------
----- - ------ - - ---------------------------
----- -------- - ----------------------------------
----- ----------- - --------------------------------------
----- ----- - -------------------------------
----- - ------ - - --------------------------------
-------------- - --------
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
-----------
--------------
-------
-------- ------------------
---
---------
--
---在上述配置中，我们使用了以下插件：
commonjs：将 CommonJS 模块转换为 ES6 模块，以兼容 Rollup。nodeResolve：在打包时解析和替换 Node.js 内置模块和第三方模块的导入语句。babel：使用 Babel 对源代码进行转换。terser：压缩和混淆 JavaScript 代码。
为了使用这些插件，我们也需要在项目中安装它们：
npm install -D rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-babel rollup-plugin-terser
external
external 选项指定了与应用程序外部相关的模块，我们可以在打包时将这些模块排除在外，以减少打包文件的大小和复杂度：
-- -------------------- ---- -------
----- - ------ - - ---------------------------
-------------- - --------
------ ---------------
------- -
----- -----------------
------- -------
--
--------- -----------
---在上述示例中，我们将 external 配置为 lodash，表示该模块将被排除在打包外。
onwarn
onwarn 是一个函数，可用于控制、记录或在警告和错误发生时执行自定义操作：
-- -------------------- ---- -------
----- - ------ - - ---------------------------
-------------- - --------
------ ---------------
------- -
----- -----------------
------- -------
--
------- --------- ----------- -- -
-- ------------- --- ----------------------- -
------------------- ------- -------- -- -----------------
- ---- -
--------------------
-
--
---在上述示例中，我们使用 onwarn 来记录警告信息，同时忽略特定错误。
cache
缓存功能能够让您在多个打包周期中共享模块内部并可作为增量的功能更新每个打包周期。在本地开发和测试过程中，这样可以显著加速构建和测试的速度：
-- -------------------- ---- -------
----- - ------ - - ---------------------------
--- ---------------
-------------- - --------
------ ---------------
------- -
----- -----------------
------- -------
--
------ ----------------------
------------------ -- -
-------------- - ---------
---在上面的示例中，我们将本次编译使用的 Rolllup 缓存存储在 rollupInstance 变量中，并在下次编译时重复使用。
深入学习
在本文中，我们只完成了 @trueadm/rollup 的基本实现和配置。当然，Rollup 还有更多功能和特性需要您自行探索和学习：
- 在 Rollup 中使用 TypeScript。
- 将 Rollup 与其他构建工具配合使用。
- 定制化和优化 Rollup 打包结果。
- 等等。
结论
在本文中，我们介绍了 @trueadm/rollup，这是一个高效和可定制化的 JavaScript 模块打包器。我们了解了如何在项目中开始使用它，并为您提供了一些常见的配置选项和技巧。最后，我们鼓励您进一步了解 Rollup 并尝试使用它以提高您的前端开发成果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe381e8991b448dd830