什么是 Rollup
Rollup 是一个 JavaScript 模块打包器，可以将多个文件打包成一个单独的文件，用于在浏览器中加载和使用。
与其他打包器相比，Rollup 的主要优势在于对 ES6 的支持，它可以将 ES6 模块转换为适用于浏览器的格式，这意味着你可以使用模块化代码来编写库，而不需要担心这些模块的大小或导出的函数或变量名称。
为什么要使用 Rollup 编译库
编写 JavaScript 库时，我们通常会使用某些工具来打包、压缩和转换代码，以便于发布和使用。Rollup 提供了一种更好的方式来处理这些库，从而使它们更快、更小，更易于使用和扩展。
以下是一些 Rollup 的优点：
模块捆绑器，替代了Webpack/Parcel的打包器，将库文件捆绑成一个文件。因此，使用Rollup，你可以创建非常小的库并且它们更快。
Rollup 支持 ES6 模块，并且有一个更好的构建管道，可以使用更少的文件，并尽可能地优化代码。
通过 Rollup 可以让你的库适用于各种不同环境中，并使您的代码覆盖率更好。它适用于服务器端代码、Web 前端界面组件代码、移动应用程序的核心代码以及 JavaScript 应用程序的任何其他部分。
与 Babel 等其它工具链结合使用，可以实现更广泛的 ES6 特性的支持，例如字符串、对象、解构、Promise 和 async/await 函数。
在 ES11 中使用 Rollup 编译库
由于 ES11 是 JavaScript 的最新标准，因此我们可以使用许多新的特性和语法来编写我们的代码。这些新特性包括模块、箭头函数、模板字符串和解构等语法。所有这些都可以简化我们的代码，使其更易于维护和扩展。这就是为什么要使用 Rollup 编译 ES11 库的原因。
在下面的示例中，我们将使用 ES11 的箭头函数和 const 关键字来创建一个非常简单的 JavaScript 库，并使用 Rollup 编译它。
首先，我们需要创建一个项目文件夹，并初始化一个 npm 项目。
mkdir my-library cd my-library npm init -y
然后，我们需要在项目中安装 Rollup 及其插件，以便我们可以将代码编译为适用于浏览器的格式。
npm install --save-dev rollup rollup-plugin-babel rollup-plugin-terser
接下来，我们需要为 Rollup 创建一个配置文件。在这个文件中，我们需要指定要编译的输入文件和要输出的文件。我们还需要使用 Babel 转换器和 Terser 压缩器来优化我们的代码。
-- -------------------- ---- -------
-- ----------------
------ ----- ---- ----------------------
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- ------------
----- -------------------------
------- -------
---------- -----
--
-------- -
-------
-------- ------------------
---
---------
--
--现在，我们可以创建一个源文件，并为该文件编写代码。
// src/index.js
export const hello = (name) => {
console.log(`Hello, ${name}!`);
};最后，我们需要在 package.json 文件中添加一个 build 命令，并使用 npm 运行 Rollup。
-- -------------------- ---- -------
-- ------------
-
---
---------- -
-------- ------- ---
--
---
-
--- --- -----Rollup 将会编译您的代码并将它们打包成一个单独的、压缩的 JavaScript 文件。现在，我们可以将此文件发布到 Web 服务器上，并在浏览器中加载它，并调用其中的函数：
<script src="dist/my-library.min.js"></script>
<script>
myLibrary.hello('Woody');
</script>总结
使用 Rollup 编译你的 JavaScript 库，可以使你的代码更可维护、更小、更易于使用和扩展。在本文中，我们简要概述了 Rollup 的优点，并提供了一个简单的示例来展示如何使用 Rollup 编译 ES11 的库。
Rollup 提供许多高级功能，比如代码分割等等。您可以在官方网站上了解更多关于 Rollup 的知识和信息。
代码示例：https://github.com/woodywu0924/rollup-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646859bc968c7c53b0894967