引言
在现代前端开发中，构建和打包工具非常重要。而 npm 是目前 JavaScript 生态系统中最受欢迎的包管理器。它提供了大量的第三方库和工具，以及方便的命令行工具使我们能够轻松地安装、升级和删除这些软件包。 其中一个非常流行的工具是 roll。roll 是一个现代化的 JavaScript 模块打包器，可以将你的代码打包成为可发布到生产环境的 bundle。
安装
你可以使用 npm 或者 yarn 来安装 roll：
--- ------- -------- ------ - - ---- ------ --- ------
注意：全局安装 rollup 后，你就可以在终端中使用 rollup 命令了。
快速上手
接下来，让我们从一个简单的例子开始，快速入门 roll 的基本功能。
创建项目并安装依赖
首先，创建一个文件夹，然后在该文件夹中初始化一个 npm 项目（如果你已经有一个 npm 项目，请跳过此步骤）：
----- ----------- -- -- ----------- --- ----
接着，安装 roll 和 rollup-plugin-babel：
--- ------- ---------- ------ -------------------
创建代码
在新建的项目中，创建两个文件：
- src/index.js
- rollup.config.js
在 src/index.js 文件中，输入以下代码：
----- --- - --- -- -- - - -- ------------------ ----
配置 rollup.config.js
在项目根目录下创建 rollup.config.js 文件，并输入以下代码：
------ ----- ---- ----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-------
-------- -----------------
--
-
--在这个配置文件中，我们定义了模块的入口文件和输出文件。还添加了一个 babel 插件来处理 ES6 语法。
注意：在使用 rollup 时，需要将显式依赖转换为隐式依赖（比如
import和require()）。
打包代码
现在，我们可以运行以下命令来生成 bundle：
------ --
这个命令会自动读取 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