引言
在现代前端开发中，构建和打包工具非常重要。而 npm 是目前 JavaScript 生态系统中最受欢迎的包管理器。它提供了大量的第三方库和工具，以及方便的命令行工具使我们能够轻松地安装、升级和删除这些软件包。 其中一个非常流行的工具是 roll。roll 是一个现代化的 JavaScript 模块打包器，可以将你的代码打包成为可发布到生产环境的 bundle。
安装
你可以使用 npm 或者 yarn 来安装 roll：
npm install --global rollup # 或 yarn global add rollup
注意：全局安装 rollup 后，你就可以在终端中使用 rollup 命令了。
快速上手
接下来，让我们从一个简单的例子开始，快速入门 roll 的基本功能。
创建项目并安装依赖
首先，创建一个文件夹，然后在该文件夹中初始化一个 npm 项目（如果你已经有一个 npm 项目，请跳过此步骤）：
mkdir rollup-demo && cd rollup-demo npm init
接着，安装 roll 和 rollup-plugin-babel：
npm install --save-dev rollup rollup-plugin-babel
创建代码
在新建的项目中，创建两个文件：
- src/index.js
- rollup.config.js
在 src/index.js 文件中，输入以下代码：
const sum = (a, b) => a + b; console.log(sum(1, 2));
配置 rollup.config.js
在项目根目录下创建 rollup.config.js 文件，并输入以下代码：
-- -------------------- ---- ------- ------ ----- ---- ---------------------- ------ ------- - ------ --------------- ------- - ----- ----------------- ------- ----- -- -------- - ------- -------- ----------------- -- - --展开代码
在这个配置文件中，我们定义了模块的入口文件和输出文件。还添加了一个 babel 插件来处理 ES6 语法。
注意：在使用 rollup 时，需要将显式依赖转换为隐式依赖（比如
import和require()）。
打包代码
现在，我们可以运行以下命令来生成 bundle：
rollup -c
这个命令会自动读取 rollup.config.js 配置文件，并生成 dist/bundle.js 文件。我们可以打开 index.html 文件并引入这个 bundle.js 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ------------ ------- ------ ---------- ------------ ------- -------------------------------- ------- -------展开代码
最后，在浏览器中打开 index.html 文件，你应该可以看到控制台输出了 3。
总结
本文简单介绍了 roll 的基本用法，并通过一个例子学习了如何使用 rollup-plugin-babel 插件来处理 ES6 语法。希望这篇文章对你有所帮助，也鼓励你去深入了解 roll 的其他高级功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35473
