介绍
在前端开发中，打包工具是不可避免的。rollup 是一个 JavaScript 模块打包工具，与 webpack 类似，但 rollup 更适用于打包库和组件，并可以生成更小、更快的包。rollup-plugin-auto-external 是一个 rollup 插件，可以自动处理外部依赖项的引入。它会自动排除那些被打包的模块中没有使用的库，从而缩小打包后的文件大小。
安装
使用 npm 安装 rollup-plugin-auto-external。
npm install rollup-plugin-auto-external --save-dev
使用
在 rollup 的配置文件中引用这个插件：
-- -------------------- ---- -------
-- ----------------
------ ------------ ---- ------------------------------
------ ------- -
------ ---------------
------- -
----- ------------
----- ---------------------
------- ------
---------- -----
--
-------- -
---------------
-- ----
--
--这个插件没有任何选项，只需要直接调用它即可。
示例代码
以下代码将演示如何使用 rollup-plugin-auto-external 打包一个库。假设库的入口文件是 src/index.js，它依赖了 lodash 和 jquery 两个库。我们希望打包出来的库中不包含这两个依赖项。
首先安装依赖项：
npm install lodash jquery --save
创建 src/index.js：
import _ from 'lodash';
import $ from 'jquery';
export default function() {
console.log(_.join(['hello', 'world'], ' '));
$('body').append('<h1>Hello World</h1>');
}创建 rollup 的配置文件 rollup.config.js：
-- -------------------- ---- -------
------ ------------ ---- ------------------------------
------ ------- -
------ ---------------
------- -
----- ------------
----- ---------------------
------- ------
---------- -----
--
-------- -
---------------
--
--运行 rollup 命令：
rollup -c
这时候会在 dist 目录下生成 my-library.js 和 my-library.js.map 两个文件。打开 my-library.js 文件，可以看到它已经将 lodash 和 jquery 排除掉了：
-- -------------------- ---- -------
--------- -------- -------- -
------ ------- --- -------- -- ------ ------ --- ----------- - -------------- - --------- -
------ ------ --- ---------- -- ---------- - --------------- -
------- - ------ ---------- --- ----------- - ---------- - ------ -- ----- ---------------- - -----------
------- --------- -- - ---- --------
-------- ------- -
------------------ --------
-
------ ------
-----指导意义
rollup-plugin-auto-external 可以帮助我们简化打包工作，尤其是当项目依赖的库比较多时。它不仅可以自动处理外部依赖项的引入，还可以排除掉不需要的库以减小打包后的文件大小。因此，在使用 rollup 打包库和组件时，推荐使用这个插件来优化打包效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/rollup-plugin-auto-external