在前端开发中，我们常常需要将多个 JavaScript 模块打包成一个文件以提高性能和可维护性。而 Rollup 是一个现代的 JavaScript 模块打包器，它可以通过 Tree-shaking 技术来减小打包出来的代码体积。同时，Rollup-plugin-node-globals 是一个非常实用的插件，它能够让你在浏览器环境下使用 node.js 的全局变量，例如 global、process 等等。
安装
在使用 Rollup-plugin-node-globals 插件之前，我们需要先安装一些必要的依赖项：
--- ------- ------ -------------------------- ---------------------- -------------------------- ----------
其中，rollup-plugin-node-resolve 用于解析模块路径，rollup-plugin-commonjs 用于处理 CommonJS 模块，rollup-plugin-node-globals 则是我们需要的插件。
配置
接下来，在 Rollup 的配置文件中增加以下代码：
------ ------- ---- -----------------------------
------ -------- ---- -------------------------
------ ------- ---- -----------------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
----------
-----------
---------
-
--上述代码中，我们首先引入了 rollup-plugin-node-resolve、rollup-plugin-commonjs 和 rollup-plugin-node-globals 三个插件。接着，在 plugins 配置中，依次调用这些插件即可。
示例
假设我们有一个名为 main.js 的入口文件，它依赖了 node.js 的全局变量 process：
--------------------------- ----------------------
如果直接使用 Rollup 打包，将会抛出下面的错误：
--- ------ --------- -- --- -------
这是因为在浏览器环境下并不存在 process 变量。但是，通过 Rollup-plugin-node-globals 插件，我们可以很容易地解决这个问题：
------ ------- ---- ---------- --------------------------- ----------------------
现在，我们再次运行 Rollup，就可以得到正确的输出结果了。
总结
Rollup-plugin-node-globals 插件可以让我们在浏览器环境中使用 node.js 的全局变量，提高代码的可复用性和可维护性。通过本文的介绍，你已经学会了如何安装和配置该插件，并且使用示例也让你更好地理解了其具体用法。希望本文能对你的前端开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51571