Rollup.js 简介

Rollup 是一款下一代 JavaScript 模块打包器。您可以使用它使用 ES2015 模块构建您的应用程序或库，然后有效地将它们捆绑到单个文件中。

这有助于解决脚本规模不断扩大和复杂性不断增加的问题。它使我们能够将程序划分为模块，以便我们可以将它们组织到不同的文件和目录中。

这些自包含的代码块提供不同的功能，我们可以轻松地使用、交换和删除它们，这意味着提高了代码的可读性、可维护性和可重用性。

#Rollup.js 概述

Rollup 是一款 JavaScript 模块打包器，它使您能够使用 ES2015 模块编写应用程序代码，然后将所有模块连接到单个文件中，以减少 HTTP 请求的数量并提高页面加载时间。Rollup 旨在快速运行，并生成比任何其他模块打包器更干净、更高效的代码。

通过使用 Rollup，您将受益于 ES2015 静态分析，这意味着您的导入模块将在编译时（执行之前）解析，并且任何未使用的导出将在程序运行之前删除，因此它将节省大小并减少脚本的开销。

另一个很棒的功能是 Tree-shaking，它会导致从捆绑包中排除未使用的导出。因此，与其导入整个模块，Tree-shaking 使您能够仅导入所需的代码段，这将使您的捆绑包更小。

看一下以下示例，假设我们在 **greetings.js** 文件中有两个函数

export function sayHello () {
    return "Hello!";
}
 
export function sayHi () {
    return "Hi!";
}

然后，我们在 **app.js** 中导入所有这些函数，然后我们只使用 **sayHello** 通过将其记录到控制台中

import * as Greetings from './greetings.js';
console.log( Greetings.sayHello() ); // Hello!

注意输出将是什么，通过利用 Tree-shaking，Rollup 将排除 **sayHi** 函数，因为它没有被使用

function sayHello () {
    return "Hello!";
}
 
console.log( sayHello() ); // Hello!

---

请注意，Rollup 是一款模块打包器，但它不是 ES2015 到 ES5 转换器，因此它不会将您的 ES2015 类语法编译为 ES5 语法。要将 ES2015 编译为 ES5，您可以使用 bable 或 **buble**，它是由 Rollup 的创建者 Rich Harris 开发的另一种 ES2015 编译工具。

#Rollup 与 Laravel Elixir

Laravel 5.3 默认使用 Webpack，但切换到 Rollup 非常容易。首先，安装 Elixir Rollup 扩展

npm install laravel-elixir-rollup-official --save-dev

然后，在您的 gulp 文件中使用 Rollup 任务，如下所示

elixir(mix => {
    mix.rollup('app.js');
});

Rollup 任务接受相对于 resources/assets/js 目录的文件数组，并在 public/js 目录中生成单个文件。如果您想自定义输入和输出文件路径，请将输入文件的路径作为第一个参数传递，并将输出路径作为第二个参数传递，**请注意**，您应该以 **./** 开头路径以指示 Elixir 忽略任何默认基本目录

elixir(function(mix) {
    mix.rollup(
        './resources/assets/js/app.js',
        './public/dist'
    );
});

**注意**，Elixir Rollup 扩展使用 **buble** 作为依赖项。因此，Elixir 将通过自动使用 buble 将 ES2015 编译为 ES5 来为您提供帮助！

最后，如果您想覆盖默认的 Rollup 配置，您有两个选择，一个是创建项目根目录中的 rollup.config.js 文件，另一个选择是通过将 Rollup 配置对象作为第四个参数传递给 Rollup Elixir 任务。

就是这样，如果您正在寻找一款快速、干净且高效的模块打包器，请在您的下一个项目中尝试一下 Rollup。