如果你是一个前端开发人员，在编写自己的 JavaScript 模块时，你可能会用到大量的第三方依赖包，在这种情况下，你可能会使用 Rollup.js 或者其他的打包工具来管理你的依赖包。在 Rollup.js 中，rollup-plugin-peer-deps-external 可以帮助你更加方便地处理依赖包的导入和导出，让你的代码更加高效和可维护。
rollup-plugin-peer-deps-external 的用途
rollup-plugin-peer-deps-external 插件可以将你的模块所依赖的第三方库打包成单独的文件，而不是将它们打包进你的 JS 文件中。这将大大减小你的 JS 文件的体积，并提高应用程序的性能。
例如，假设你的项目依赖了 lodash、jquery 和 react 三个库，你可以使用 rollup-plugin-peer-deps-external 插件将它们从你的代码中排除出去，将它们打包成一个单独的文件，然后在应用程序中引用它。这样一来，你的应用程序只需要下载一次这个文件，就可以实现对这三个库的复用，而且还可以避免版本冲突和重复下载问题。
安装 rollup-plugin-peer-deps-external
要使用 rollup-plugin-peer-deps-external 插件，你需要为你的项目安装它。你可以通过 npm 来完成安装，只需要在终端中运行以下命令即可：
--- ------- ---------- --------------------------------
配置 rollup-plugin-peer-deps-external
要配置 rollup-plugin-peer-deps-external 插件，需要在你的 rollup 配置文件中添加以下内容：
------ ---------------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- ------------------
------- -----
--
-------- -
------------------
--
--------- -
--------
------------
---------
--------
-
--配置 rollup 配置文件
现在你需要配置你的 rollup 配置文件，使得 rollup-plugin-peer-deps-external 插件可以正确的工作。首先，你需要添加 import 语句以导入 rollup-plugin-peer-deps-external:
------ ---------------- ---- -----------------------------------
然后，在你的 rollup 配置对象中，添加以下内容：
-------- -
------------------
--
--------- -
--------
------------
---------
--------
-这里的 plugins 定义了你在 rollup 打包过程中需要使用的插件。我们只需要将 rollup-plugin-peer-deps-external 插件加入到插件列表中就可以了。由于每个插件的调用顺序是有讲究的，我们将该插件的调用放在第一位。
external 则是一个由需要 external 处理的库组成的数组。这些库不会被打包到我们的项目中，而是在运行时依靠用户自行加载这些库。这些库通常是一些公共的库，如 React、jQuery 等等。如需更好的扩展性，我们建议使用 peerDependencies。
peerDependencies 是一种指定插件所需要的外部依赖库的方式。在你的 package.json 文件中，你可以添加一个 peers 字段：
------------------- - -------- ---------- ------------ ---------- --------- ----------- --------- -------- -
这表示你的项目需要 react、react-dom、lodash 和 jquery 四个库，并指定了它们的版本号。在安装时，npm 将不会将这些库作为项目依赖包安装，而是作为外部依赖库。当你应用程序运行时，你需要手动加载这些库。
示例代码
在这个例子中，我将指定使用 jquery、lodash、react 和 react-dom 这四个库作为外部依赖库。在我的项目中，我已经使用这些库来开发应用程序。
现在我打算使用 rollup-plugin-peer-deps-external 插件来对这些库进行打包。我已经安装了该插件，并在我的 rollup.js 配置文件中添加了以下代码：
------ ---------------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- ------------------
------- -----
--
-------- -
------------------
--
--------- -
--------
------------
---------
--------
-
--现在，我只需在终端中运行以下命令，就可以生成我们的打包文件了：
--- ------ --
这将使用 Rollup.js 来打包我们的代码。输出文件将存放在 build 目录下，文件名为 bundle.js。现在，我的应用程序将快速地加载，因为它只需要加载一个文件就可以了，而不需要加载四个外部依赖库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/161323