作为快速和轻量级的工具，Rollup在将多个JavaScript文件压缩为一个文件方面功不可没。在这篇文章中，你将学习如何在JavaScript中使用Rollup模块捆绑器。
内容列表
前提条件
要跟上本教程，读者应具备以下条件。
- 对JavaScript编程语言有一个基本的了解。
- 一个代码编辑器（本文将使用VS Code）。
- 在你的机器上安装Node.js。
为什么要使用Rollup？
以下是你应该考虑在你的项目中使用Rollup的一些原因。
- 它提供了树形摇动，删除了不使用的代码，使项目开发更容易。
- 简化应用程序开发，因为它更容易处理可管理的小文件。
- Rollup是相当快速和轻量级的。
- 它与ECMAScript 5兼容。
第一步：Rollup的安装和配置
打开VS Code，创建一个新的文件夹，并将其命名为bundler 。我们将把这个文件夹初始化为一个npm 包。要做到这一点，请打开你的VS Code终端，通过cd bundler ，换到bundler 目录中。在我的例子中，我将有以下内容。
运行下面的代码，将该文件夹初始化为一个npm 包。
npm init -y
接下来是通过运行下面的命令在我们的文件夹中安装rollup 。
npm i -D rollup
注意，通过在安装命令中包括
-D，Rollup将作为一个开发依赖项被安装。
如果你的安装成功，你的文件夹中应该有以下内容。
第2步：创建你的第一个Rollup捆绑包
首先创建一个src 文件夹。这个文件夹将存放几个JavaScript文件，在这种情况下，在这个文件夹中创建两个文件，并命名为main.js 和foo.js 。
在foo.js ，我们要导出一个字符串，但你可以导出函数、变量或任何有效的数据类型。
export default "I'm trying out Rollup Module Bundler";
我们将在main.js 文件中导入foo.js ，并使用module.export 输出一个函数，然后显示来自foo.js 的字符串。
import foo from "./foo.js";
// Export a function using module.export and grab the string value in foo.js. The statement will return "I'm trying out Rollup Module Bundler"
module.export = function () {
console.log(foo);
};
为了创建一个包，我们将不得不在package.json 文件中创建一个start 命令，并指定格式为cjs （普通JavaScipt），如下图所示。
打开终端，运行start命令来创建bundle。
npm start
你应该在你的终端中打印出捆绑文件，如下图所示。
如果你想把捆绑代码放在一个文件里，你必须指定输出文件。
在位于package.json 的start命令中，指定输出文件，这样当你执行它时，你就会在一个文件中得到你的代码。
像这样。
"scripts": {
"start": "rollup src/main.js -o build/bundle.js -f cjs"
}
-o 标志指定了输出文件，在本例中是build/bundle.js 。格式（-f ）将保持为普通的JavaScript。现在，在执行start 命令时，将创建一个build 文件夹，其中有一个新的bundle.js 文件，它结合了我们所有的代码，如下图所示。
还有一种方法可以创建一个捆绑文件，就是在我们项目的根部创建一个Rollup配置文件，并将其命名为rollup.config.js 。
请注意，该文件只应按所述命名，以便Rollup能够找到它。
在我们的例子中，我们的配置文件将包含以下内容。
export default {
input: "src/main.js", // Here is the entry point of our application
output: {
file: "build/bundle.js", // Bundled code will be contained here
format: "cjs", // species the format of our file
},
};
现在你已经有了一个配置文件，而不是在package.json 中设置输出文件路径。
我们将简单地有。
"scripts": {
"start": "rollup --config"
}
第3步：插件
插件允许你自定义Rollup的行为。例如，在捆绑前转译代码，以及在你的node模块文件夹中寻找第三方模块。
让我们看一个例子，说明我们如何在Rollup中使用一个CSS插件。默认情况下，Rollup只会转译扩展名为.js 的文件。假设我们想要捆绑一个带有以下代码的样式表。
body {
background-color: green;
}
我们将像这样在我们的main.js 文件中导入它。
import "./style.css";
module.export = function () {
console.log(foo);
};
当你试图捆绑这个文件时，会出现以下错误。这是因为我们没有安装任何处理CSS样式表的插件。
为了解决这个问题，让我们首先从终端安装CSS插件，如下图所示。
npm i rollup-plugin-css-only
在你的rollup.config.js 文件中，导入模块，创建一个plugins 条目，并将其值设置为数组，因为它可能包含一个以上的值，如下图所示。
import css from "rollup-plugin-css-only";
export default {
input: "src/main.js",
output: {
file: "build/bundle.js",
format: "cjs",
},
plugins: [
css({
output: "bundle.css",
}),
],
};
前往终端，运行你的文件，在你的build 文件夹中，你现在应该有一个CSS绑定文件，如下图所示。
总结
从本教程中，你学到了如何在基本水平上使用Rollup模块捆绑器。如果你想了解更多关于Rollup的信息，请看这里的官方文档。
