安装与配置 Rollup

在开始使用 Rollup 进行项目构建之前，我们需要先完成 Rollup 的安装以及基本的配置工作。本章将详细介绍如何安装 Rollup 和其插件，并通过一些简单的示例展示如何进行基本配置。

创建项目结构

首先，创建一个新的文件夹作为你的项目目录，并在该文件夹中初始化一个 npm 项目：

mkdir my-rollup-project
cd my-rollup-project
npm init -y

这会生成一个 package.json 文件，用于记录项目的依赖关系和脚本命令等信息。

安装 Rollup

接下来，我们需要安装 Rollup 及其核心插件。在项目的根目录下运行以下命令来安装 Rollup 和常用的插件：

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs

这里我们安装了三个模块：

• rollup: Rollup 本身。
• @rollup/plugin-node-resolve: 用于解析模块路径。
• @rollup/plugin-commonjs: 允许 Rollup 处理 CommonJS 模块。

创建入口文件

在项目根目录下创建一个名为 src 的文件夹，并在其中创建一个 JavaScript 文件作为项目的入口文件。例如，我们可以创建一个 main.js 文件：

// src/main.js
export const greet = (name) => {
    return `Hello, ${name}!`;
};

这个简单的函数用于输出一条问候语。

配置 Rollup

为了告诉 Rollup 如何处理我们的项目，我们需要创建一个配置文件。在项目的根目录下创建一个名为 rollup.config.js 的文件，并添加如下内容：

// www.javascriptcn.com code example
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
    input: 'src/main.js', // 指定入口文件
    output: {
        file: 'dist/bundle.js', // 输出文件路径
        format: 'iife', // 包裹在 IIFE 中，适合直接在浏览器中执行
    },
    plugins: [
        resolve(), // 插件配置
        commonjs(),
    ],
};

在这个配置文件中，我们指定了入口文件的位置、输出文件的位置和格式，并引入了前面安装的插件。

构建项目

现在一切就绪，我们可以使用 Rollup 来构建我们的项目了。在终端中输入以下命令：

npx rollup -c

这里的 -c 参数表示使用当前目录下的配置文件 rollup.config.js 来进行构建。构建完成后，你会在 dist 目录下看到生成的 bundle.js 文件。

测试构建结果

最后，为了验证构建结果是否正确，可以在 HTML 文件中引入刚刚生成的 bundle.js 文件，并调用入口文件中的函数。创建一个 index.html 文件：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rollup Test</title>
</head>
<body>
    <script src="dist/bundle.js"></script>
    <script>
        console.log(greet('World'));
    </script>
</body>
</html>

打开这个 HTML 文件，你应该能在浏览器的控制台中看到输出的 "Hello, World!"。

通过以上步骤，我们就完成了 Rollup 的基本安装与配置，以及一个简单项目的构建。接下来，可以根据实际需求进一步扩展和优化配置。