简介
rollup-make-bundles 是一款能够轻松使用 Rollup 打包出多种不同格式的文件的工具。
Rollup 是一个 JavaScript 模块打包器，与其他打包器不同，它专门为 JavaScript 库等优化，可以生成更小、更快的代码。然而，一般开发者通常需要生成多种格式的文件，如 CommonJS、AMD 和 UMD 等，而 Rollup 只能生成一种格式的文件。
rollup-make-bundles 就是为了解决这个问题而产生的工具，它可以生成多种格式的文件，包括 CommonJS、AMD 和 UMD 等，把所要生成的文件格式写在配置文件里就可以一次性打出多种格式的文件，大大地提高了开发效率。
本文将详细介绍 rollup-make-bundles 的使用方法。
安装
首先，需要在项目中安装 rollup-make-bundles：
--- ------- ------------------- ----------
安装完成后，在项目的 package.json 文件中添加以下内容：
---------- - --------- --------------------- --
此处把 rollup-make-bundles 添加为了一个脚本，以后直接运行 npm run bundle 就可以了。
配置文件
接下来，在项目根目录下创建一个名为 rollup.config.js 的文件（如果已经存在就可以直接修改）。
以下是一个示例配置文件：
------ ---------- ---- ----------------------------
------ ------- -
------ ---------------
------- -
-
------- ------
----- -----------------------
--
-
------- ------
----- --------------------
--
-
----- --------
------- ------
----- ------------------------
-------- -
------- ----
--
--
--
-------- -
-------------
--
--------- -
---------
--
--配置文件中主要包含两个部分：
- 输入和输出配置
- 插件和外部库配置
输入和输出配置
输入和输出配置主要是配置所要打包的源代码路径和要生成的文件格式，以及生成的文件存放的路径等。
在示例配置中，我们指定了输入文件是 src/index.ts，输出文件有三个：
dist/index.common.js：生成 CommonJS 格式的文件。dist/index.esm.js：生成 ES6 模块格式的文件。dist/index.umd.min.js：生成 UMD 格式的文件，且使用 Minified 压缩。
其中，cjs 表示 CommonJS 格式，esm 表示 ES6 模块格式，umd 则是 UMD 格式。
插件和外部库配置
插件和外部库配置主要是指定需要的插件和外部库，以及其在生成的代码中的名称和变量名等。
在示例配置中，我们指定了使用 rollup-plugin-typescript2 插件，其用于支持使用 TypeScript 编写脚本。
同时，在 external 中指定 lodash 为外部库，以便在生成代码中引用。
在 UMD 格式的输出中，我们用 globals 指定了所有需要在输出文件中用到的模块或库的变量名，这里我们指定了可以通过 _ 来引用 lodash 库。
运行
在完成以上配置后，就可以直接运行 npm run bundle 进行打包了。生成的文件会存放在指定的路径中。
总结
rollup-make-bundles 为我们的前端项目提供了一种方便快捷的打包工具，可以一次性生成多种文件格式，极大地提高了开发效率。当我们需要将自己的前端库开放给其他开发者使用时，就需要用到 rollup-make-bundles 提供的多种文件格式，以便用户可以在不同的环境中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005589e81e8991b448d5e7d