Logo

菜单

发布于 2025-12-10 5 阅读
0

如何设置 Rollup 配置 安装 Rollup 下一代 JavaScript 处理非 ES 模块 压缩输出 即将推出

如何设置 Rollup 配置

安装 Rollup

下一代 JavaScript

处理非 ES 模块

压缩输出

即将推出

最初发表在我的博客上。

随着 ECMAScript 和 NPM 时代的到来，前端开发变得非常有趣。现在有很多包和工具可以供我们在项目中使用，让我们的工作更加轻松。其中之一就是rollup.js。

让我们从简短的介绍开始本文，了解 rollup 实际上是什么以及它对我们和我们的应用程序有什么作用。

官方声明：

Rollup 是一个 JavaScript 模块打包器，它可以将小段代码编译成更大、更复杂的文件，例如库或应用程序。它使用 JavaScript ES6 版本中包含的全新代码模块标准化格式，而不是像 CommonJS 和 AMD 等之前特有的解决方案。

让我们分解一下上面的陈述。

Rollup 是一个 JavaScript 模块打包器，它可以将小段代码编译成更大的代码

如果我们将应用程序拆分成逻辑上独立的小块，开发起来就会容易得多。这样，我们就能降低开发过程中代码的整体复杂性，使其更易于上手和维护。如果一个团队成员能够专注于较小的部分，而不是分析整个应用程序逻辑并试图隔离某个特定的代码块，那么他/她加入团队就会更容易、更快捷。在中间插入一段新代码后，出错的可能性会大大增加，而这正是我们不希望看到的。

Rollup 帮助我们解决了上述用例。它将我们的小块代码打包成一个代码库。为此，我们可以使用命令行或名为 的特定配置文件rollup.config.js。

在本文中，我将介绍一种配置文件方法。

它使用 ES6 中包含的代码模块的新标准化格式

这非常简洁。它的作用是让我们能够在 JavaScript 文件中编写 import/export 语句。我们可以导入数据、常量、函数、整个逻辑块……所有这些都可以在下一代 JavaScript 中编写，并让 rollup（及其插件）负责创建浏览器可读的输出。还可以指定输出格式，我们将在本文后面讨论。

总结一下，并回答“是什么”和“为什么”的问题。Rollup 是一个 JavaScript 打包器（也可以通过插件压缩输出），如果我们想使用ECMAScript 规范中的新语法糖import，就需要它。export

请注意，下面的代码假定 Node.js 和 NPM 包管理器已经安装，并且您的应用程序已经使用npm init命令初始化。

安装 Rollup

要安装汇总并将其保存为开发依赖项，我们应该运行以下命令：

npm install rollup --save-dev
Enter fullscreen mode Exit fullscreen mode

上面的命令将安装汇总节点包并更新package.json位于我们的应用程序根文件夹中的文件。

"devDependencies": {
    "rollup": "^1.10.0" // the version might be different in your case depending on the time reading this
}
Enter fullscreen mode Exit fullscreen mode

接下来，在应用程序根文件夹中创建一个名为 的新文件rollup.config.js。在其中添加以下内容。

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle'
    }
}
Enter fullscreen mode Exit fullscreen mode

让我们看看每个配置选项的作用：

  1. input- 这是必需的设置，它代表我们希望 Rollup 处理的文件。它应该是应用程序的主入口点，我们会在其中导入应用程序所需的所有其他内容。

  2. output- 它是一个类似配置的对象，用于设置处理结果。配置至少应包含以下内容：

    2.1 file- 这是创建 bundle 的位置。它代表要写入的文件。通常位于build或dist文件夹下。文件夹和文件将由 rollup 自动生成。

    2.2 format- Rollup 支持多种输出格式。在本例中，我们将使用立即调用的函数表达式 (iife)。

    2.3 name- 表示已创建包的全局变量名称

其他格式可在此处找到，部分output.format

测试配置

现在我们已经完成了设置，我们可以测试一切是否正常。

首先，创建一个源文件夹src。此文件夹将包含我们的应用程序源文件。在其中，创建应用程序入口点、一个名为的文件main.js以及index.html页面。

接下来，让我们创建一个测试模块。在src文件夹中，创建一个子文件夹modules，并在其中创建一个名为的文件MyModule.js。在其中添加以下内容：

const sayHello = (message) => {
    alert(message);
}

export default sayHello;
Enter fullscreen mode Exit fullscreen mode

在main.js文件中添加导入语句并使用导入的函数：

import sayHello from './modules/MyModule';

sayHello('Hello from Rollup');
Enter fullscreen mode Exit fullscreen mode

打开package.json文件并在脚本设置下添加以下脚本：

"scripts": {
    "build": "rollup -c"
}
Enter fullscreen mode Exit fullscreen mode

并运行以下命令：

npm run build
Enter fullscreen mode Exit fullscreen mode

build这将在我们的项目中创建一个名为 的新文件夹，其中包含生成的bundle.min.js文件。我们可以通过将其作为引用添加到我们的index.html页面并在浏览器中打开它来查看是否已正确创建该包。

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <head>
        <title>Rollup Example</title>
    </head>

    <body>
    </body>

    <script src="../build/bundle.min.js"></script>
</html>
Enter fullscreen mode Exit fullscreen mode

如果一切操作正确，打开页面后应该会立即弹出警报。

目前，只有现代浏览器才能正常运行。为了使其与不支持 ECMAScript 功能的浏览器兼容，我们需要添加一些插件。

下一代 JavaScript

安装 babel

为了正确解析我们的模块并使其与旧版浏览器兼容，我们应该引入babel来编译输出。如果您不熟悉它，babel 是一个 JavaScript 编译器，它通过将下一代 JavaScript 代码编译为旧版本，使之能够跨浏览器兼容。

为了继续这个示例，我们需要安装所需的软件包：

npm install @babel/core @babel/preset-env rollup-plugin-babel --save-dev
Enter fullscreen mode Exit fullscreen mode

上面的命令将更新我们的开发依赖项，如下所示：

// the versions might be different in your case depending on the time reading this
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "rollup": "^1.10.0",
    "rollup-plugin-babel": "^4.3.2"
 }
Enter fullscreen mode Exit fullscreen mode

接下来我们需要.babelrc在应用程序文件夹中创建一个babel配置文件，内容如下：

{
  "presets": [
      "@babel/env"
  ]
}
Enter fullscreen mode Exit fullscreen mode

完成这些操作后，babel 就配置完毕，可以使用了。鉴于本文主要介绍 rollup，请访问babel 官方网站了解更多信息。

更新 rollup.config.js

上述更改本身不会产生任何效果，因为我们没有告诉 rollup 它需要使用新安装的软件包。我们通过rollup.config.js如下所示更新文件来实现这一点：

import babel from 'rollup-plugin-babel';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle'
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        })
    ]
}
Enter fullscreen mode Exit fullscreen mode

我们保留了之前的input和配置，添加了 import 语句来引入，并引入了config 选项。插件用于自定义 rollup 行为。在本例中，我们希望它将我们的 ECMAScript 编译到其前身中。outputrollup-plugin-babelplugins

另外，我们排除了该node_modules文件夹，以避免编译第三方脚本和库。现在，我们可以再次运行构建命令了：

npm run build
Enter fullscreen mode Exit fullscreen mode

预期的结果是我们的捆绑包现在应该具有跨浏览器兼容的不同内容。

没有 babel 的情况bundle.min.js：

(function () {
    'use strict';

    const sayHello = (message) => {
        alert(message);
    };

    sayHello('Hello from Rollup');

}());
Enter fullscreen mode Exit fullscreen mode

并使用 babel：

(function () {
    'use strict';

    var sayHello = function sayHello(message) {
      alert(message);
    };

    sayHello('Hello from Rollup');

}());
Enter fullscreen mode Exit fullscreen mode

我们可以清楚地看到区别。保留字const不再存在，并且已转换为var。此外，我们的arrow function也已转换为跨浏览器兼容版本。

在浏览器中打开index.html页面后，结果应该相同，并且应该再次显示弹出消息。

处理非 ES 模块

到目前为止，我们的项目没有任何 Node 模块依赖，唯一导入的模块是我们创建的测试模块。然而，在实际应用中，这种情况很少见，我们的应用可能需要非 ES 模块。

Rollup 本身并不支持 CommonJS 模块，因此我们需要一些插件。为了使我们的项目能够使用 Node 模块依赖项，我们需要安装以下软件包：

npm install rollup-plugin-node-resolve rollup-plugin-commonjs --save-dev
Enter fullscreen mode Exit fullscreen mode

该rollup-plugin-node-resolve插件允许我们加载第三方模块，并将rollup-plugin-commonjs它们转换为 ES6 版本。

我们的package.json文件应该是这样的：

// the versions might be different in your case depending on the time reading this
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "rollup": "^1.10.0",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-node-resolve": "^4.2.3"
}
Enter fullscreen mode Exit fullscreen mode

更新 rollup.config.js - 第 2 部分

再次强调，rollup 需要知道它需要使用新的插件。我们按照之前配置rollup-plugin-babel插件的方式配置它们：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle'
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        resolve(),
        commonjs()
    ]
}
Enter fullscreen mode Exit fullscreen mode

安装第三方库

现在我们准备安装并使用我们的第一个第三方依赖项。lodash例如，要安装它，请运行以下命令：

npm install lodash --save-dev
Enter fullscreen mode Exit fullscreen mode

我们的package.json文件应该是这样的：

"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "lodash": "^4.17.11",
    "rollup": "^1.10.0",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-node-resolve": "^4.2.3"
}
Enter fullscreen mode Exit fullscreen mode

更新 rollup.config.js - 第 3 部分

为了使用它，我们再次需要rollup.config.js稍微调整一下文件。我们需要通过全局变量 来告诉 rollup 我们正在使用一个外部库_。这是必需的，因为我们要将它导入到我们的main.js文件中。像这样更新配置：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle',
        globals: {
            'lodash': '_',
        }
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        resolve(),
        commonjs()
    ]
}
Enter fullscreen mode Exit fullscreen mode

通过添加globals配置，我们确保汇总知道如何处理外部导入。

接下来，我们应该尝试使用 lodash 库来测试一切是否正常。例如，让我们使用以下_concat函数。

main.js像这样更新文件：

import sayHello from './modules/MyModule';
import _ from 'lodash';

const arr = _.concat([1, 2, 3], 4, [5]);
sayHello('Hello from Rollup and lodash: ' + arr);
Enter fullscreen mode Exit fullscreen mode

并运行build命令：

npm run build
Enter fullscreen mode Exit fullscreen mode

创建的模块bundle.min.js应该包含两个模块：我们创建的测试模块和外部导入的lodash模块。

index.html如果此时运行页面，我们应该会看到一条包含不同消息的警告。它应该能够Hello from Rollup and lodash: 1,2,3,4,5正常打印。

压缩输出

生产环境通常需要最终打包文件的最小化版本。出于各种原因，例如减小文件大小、提高加载速度、提升网络传输速度等等，都需要最小化。为了最小化文件，我们需要安装另一个插件rollup-plugin-uglify：

npm install rollup-plugin-uglify --save-dev
Enter fullscreen mode Exit fullscreen mode

rollup.config.js接下来，通过本例中第四次更新来告诉汇总它需要使用它：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { uglify } from 'rollup-plugin-uglify';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle',
        globals: {
            'lodash': '_',
        }
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        resolve(),
        commonjs(),
        uglify()
    ]
}
Enter fullscreen mode Exit fullscreen mode

并运行构建命令：

npm run build
Enter fullscreen mode Exit fullscreen mode

现在，如果我们看一下我们的bundle.min.js文件，代码的可读性应该会差很多:)如果比较缩小前后的文件，应该会发现明显的大小差异。

即将推出

在下一篇汇总文章中，我将介绍 CSS 和 HTML 文件的导入。

感谢您的阅读，我们下篇文章再见。

鏂囩珷鏉ユ簮锛�https://dev.to/proticm/how-to-setup-rollup-config-45mk
Flexbox 构建工具隆重推出！...
处理数组重复可能会比较棘手 进一步阅读