在 Web 开发中，模块化编程与打包是非常重要的环节。而打包工具 rollup，作为一款支持 ES6 模块的打包工具，可以有效地帮助我们进行模块化开发。而 rollup-plugin-es-info，作为一个 rollup 的插件，可以帮助我们查看打包后的模块间依赖关系，提供更好的调试体验。
rollup-plugin-es-info 简介
rollup-plugin-es-info 是一个 rollup 的插件，它可以在 rollup 打包过程中，按照指定的格式输出打包后的模块信息。比如，它可以输出每个模块的依赖关系、导出变量等信息。同时，它还支持在输出信息中插入自定义的文本，以达到进一步定制化的要求。
rollup-plugin-es-info 安装
rollup-plugin-es-info 的安装非常简单，只需要在项目中安装它即可。
npm install rollup-plugin-es-info --save-dev
安装完成后，我们可以通过在 rollup.config.js 中使用该插件来输出我们需要的信息。
-- -------------------- ---- -------
------ ------ ---- ------------------------
------ ------- -
-- ---
-------- -
--------
------- -----------------------------------------
- ------- ------ ---------
------- ------------------------------------------
---
--
-在上述代码中，使用了 import esInfo from 'rollup-plugin-es-info' 语句来导入 rollup-plugin-es-info 模块，并通过 esInfo() 方法来创建一个 es-info 的实例。在这个实例中，我们可以通过配置选项来控制输出的信息格式。具体来说，banner 和 footer 分别表示输出信息的头部和尾部，我们可以通过它们插入一些自定义的文本内容。当然，也可以不设置这些内容。
在 rollup 的插件中，我们可以通过 intro 属性来对代码块进行操作。所以可以通过 intro 参数，将输出的信息保存到一段指定的代码块顶部。
-- -------------------- ---- -------
------ ------ ---- ------------------------
------ ------- -
-- ---
-------- -
--------
------ -------------------- ----- --
-------------------------- ----- - -----
--
-
-rollup-plugin-es-info 配置解释
banner: 输出信息的头部，可以插入自定义的文本，也可以为空。如果有多行文本，需要使用换行符\n进行分割。footer: 输出信息的尾部，可以插入自定义的文本，也可以为空。intro: 在输出信息前面插入的代码块。outro: 在输出信息后面插入的代码块。name: 输出的信息名称，默认为__esInfo__。在输出的代码块中，我们可以通过该名称访问输出的信息。filter: 指定需要输出信息的模块，可以是一个字符串、正则表达式或者函数。
rollup-plugin-es-info 示例
以下是一个演示 rollup-plugin-es-info 的运行效果的示例代码：
-- -------------------- ---- -------
------ ------ ---- ------------------------
------ ------- ---- -----------------------------
------ -------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
--------
------ -
------------------- -------
-------------------------- ----- - ----
--
---
----------
-----------
--
--在上述代码中，我们创建了一个 esInfo 的实例，并将它插入到插件数组中。其中，我们设置了 intro 参数，将输出的信息保存到一个指定的代码块中。然后，我们还使用了 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 这两个插件来加载和编译 js 的依赖项。
最后，我们可以通过在终端或浏览器中查看打包后的 js 文件，来查看输出的信息。
总结
rollup-plugin-es-info 是一个在 rollup 打包过程中非常有用的插件。它可以帮助我们输出每个模块的依赖关系、导出变量等信息，提供更好的调试体验。如果你正在使用 rollup 进行模块化开发，那么 rollup-plugin-es-info 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79684