在前端开发中，很多时候我们需要使用各种各样的第三方库和插件来完成我们的开发工作。在当今的开源生态中，有数万的 npm 包可供选择。然而，在使用这些包时，我们需要解决许多问题，例如版本冲突、依赖管理等。其中一个最常见的问题是如何在打包时将一些依赖包自动排除在外，这样可以有效地减少打包后文件的大小，提高项目的加载速度。
这时，我们就可以使用 npm 包 @liangchun/rollup-plugin-auto-external。其主要作用是让 Rollup 在打包时自动将指定的依赖包排除在外，从而减小打包后文件的大小。
安装
首先，我们需要安装该 npm 包。在命令行中输入以下命令：
npm install @liangchun/rollup-plugin-auto-external --save-dev
其中，--save-dev 参数是指将该包添加到项目的 devDependencies 中。这是因为该包只用于开发环境，不会在生产环境中使用。
使用方法
安装完毕后，我们需要配置 Rollup，让其能够正确地使用该插件。以下是一个简单的 Rollup 配置文件：
-- -------------------- ---- ------- -- ---------------- ------ ------------ ---- ----------------------------------------- ------ ------- - ------ --------------- ------- - ----- ----------------- ------- ----- -- -------- - -------------- - --展开代码
在这个配置文件中，我们首先使用 import 导入了 @liangchun/rollup-plugin-auto-external 模块，然后将其作为一个插件添加到了 Rollup 的配置中。autoExternal() 函数没有传入任何参数，这是因为它会自动根据我们的代码中使用的依赖项来排除它们。
示例
为了更好地理解该插件的使用方法，以下是一个示例：
-- -------------------- ---- ------- -- ------------ ------ - ---- --------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- --- - -- -- - ---------- ----------- -- -------------------- --- ---------------------------------展开代码
在这个例子中，我们使用了 lodash、React 和 ReactDOM 三个库。接下来，我们使用 Rollup 进行打包：
rollup -c
运行完毕后，我们可以在 dist 目录下得到一个名为 bundle.js 的文件。打开该文件，可以看到其中已经排除了 lodash、React 和 ReactDOM 这三个库：
... Object.defineProperty(exports, '__esModule', { value: true }); var react = require('react'); var reactDom = require('react-dom'); var _ = require('lodash'); ...
这样，我们就成功地使用 @liangchun/rollup-plugin-auto-external 插件来排除了不必要的依赖项。
总结
@liangchun/rollup-plugin-auto-external 是一个方便的 npm 包，可以帮助我们在开发过程中轻松排除不必要的依赖项。使用时只需要简单配置，即可轻松实现自动排除所需的依赖项，省去了手动管理依赖项的麻烦。同时，也能够有效地减小打包后文件的大小，提升项目的加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/195483
