Rollup.js 模块打包器：从入门到精通，打造高性能前端应用

字数: (7469)

阅读: (2095)

2026-04-03 10:50:20

内容摘要：Rollup.js 模块打包器：从入门到精通，打造高性能前端应用,

在现代前端开发中，JavaScript 模块化已经成为一种标准。Webpack 作为老牌的模块打包器，功能强大，但配置复杂，体积较大。Rollup.js 作为后起之秀，凭借其优秀的 Tree-shaking 和 ES 模块支持，在构建小型库和现代 Web 应用中越来越受欢迎。本文将带你快速入门 Rollup.js，掌握其核心概念和用法，构建出高性能的前端应用。

为什么选择 Rollup.js？

Webpack 虽然功能强大，但对于一些小型项目或者库来说，显得过于臃肿。Rollup.js 的优势在于：

Tree-shaking：Rollup.js 可以静态分析你的代码，移除未使用的代码，从而减小打包体积。Webpack 也支持 Tree-shaking，但 Rollup.js 的 Tree-shaking 效果更好，因为它更专注于 ES 模块。
ES 模块支持：Rollup.js 原生支持 ES 模块，可以更好地利用 ES 模块的特性，例如动态导入。
轻量级：Rollup.js 本身就是一个轻量级的工具，安装和配置都比较简单。

Rollup.js 核心概念

在使用 Rollup.js 之前，我们需要了解它的几个核心概念：

入口（Entry）：Rollup.js 从哪个文件开始打包。
输出（Output）：Rollup.js 将打包后的代码输出到哪里。
插件（Plugins）：Rollup.js 通过插件来扩展其功能，例如代码转换、代码压缩等。
配置（Configuration）：Rollup.js 的配置可以通过 rollup.config.js 文件来指定。

Rollup.js 快速入门

安装 Rollup.js

首先，我们需要安装 Rollup.js：

npm install rollup --save-dev
# 或者
yarn add rollup -D

创建 Rollup.js 配置文件

在项目根目录下创建一个 rollup.config.js 文件，并添加以下内容：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'; // 查找和打包node_modules中的第三方模块
import commonjs from '@rollup/plugin-commonjs';   // 将CommonJS模块转换为ES模块

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife',       // 输出格式，iife 表示立即执行函数
    name: 'MyBundle'     // 全局变量名，当 format 为 iife 或 umd 时需要指定
  },
  plugins: [
    resolve(),           // 使用 resolve 插件
    commonjs()            // 使用 commonjs 插件
  ]
};

编写代码

创建一个 src/index.js 文件，并添加以下内容：

// src/index.js
function hello() {
  console.log('Hello, Rollup.js!');
}

hello();

运行 Rollup.js
在 package.json 文件中添加一个 script：
```
{
  "scripts": {
    "build": "rollup -c"
  }
}
```
然后运行：
```
npm run build
# 或者
yarn build
```
Rollup.js 将会打包你的代码，并将结果输出到 dist/bundle.js 文件中。
在 HTML 中使用打包后的代码
创建一个 index.html 文件，并添加以下内容：
```
<!DOCTYPE html>
<html>
<head>
  <title>Rollup.js Example</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>
```
在浏览器中打开 index.html 文件，你将会看到控制台输出了 Hello, Rollup.js!。

Rollup.js 常用插件

Rollup.js 提供了许多插件来扩展其功能，以下是一些常用的插件：

@rollup/plugin-node-resolve：用于查找和打包 node_modules 中的第三方模块。
@rollup/plugin-commonjs：用于将 CommonJS 模块转换为 ES 模块。
@rollup/plugin-babel：用于使用 Babel 来转换代码。
rollup-plugin-terser：用于压缩代码。

Rollup.js 实战：构建一个简单的 React 组件库

Rollup.js 非常适合构建 React 组件库，因为它能够有效地进行 Tree-shaking，减小组件库的体积。下面是一个简单的例子：

创建项目

mkdir react-component-library
cd react-component-library
npm init -y
npm install react react-dom --save-dev
npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel rollup-plugin-peer-deps-external @babel/core @babel/preset-env @babel/preset-react --save-dev

创建组件

创建一个 src/components/Button.js 文件，并添加以下内容：

// src/components/Button.js
import React from 'react';

function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

export default Button;

创建入口文件
创建一个 src/index.js 文件，并添加以下内容：
```
// src/index.js
export { default as Button } from './components/Button';
```

配置 Rollup.js

创建 rollup.config.js 文件，并添加以下内容：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external'; // 忽略 peerDependencies

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/index.es.js',
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(), // 先处理 peerDependencies
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**', // 忽略 node_modules 目录
      babelHelpers: 'bundled',
      presets: ["@babel/preset-env", "@babel/preset-react"]
    })
  ]
};

添加 Babel 配置
创建 .babelrc 文件，并添加以下内容：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
构建组件库
在 package.json 文件中添加一个 script：
```
{
  "scripts": {
    "build": "rollup -c"
  }
}
```
然后运行：
```
npm run build
# 或者
yarn build
```
Rollup.js 将会打包你的组件库，并将结果输出到 dist 目录中。

Rollup.js 避坑指南

CommonJS 模块转换：Rollup.js 默认只支持 ES 模块，如果你的代码中使用了 CommonJS 模块，你需要使用 @rollup/plugin-commonjs 插件来转换它们。尤其是一些老的 npm 包可能还是 CommonJS 规范，需要注意。
TypeScript 支持：如果你使用 TypeScript，你需要使用 @rollup/plugin-typescript 插件来编译 TypeScript 代码。当然，也可以先用 tsc 命令编译成 JavaScript 后再使用 Rollup.
循环依赖：Rollup.js 对循环依赖的处理不如 Webpack，需要尽量避免循环依赖。
外部依赖：使用 rollup-plugin-peer-deps-external 可以自动将 peerDependencies 定义的包排除在最终产物之外，减小体积，避免重复打包。

RollupJavaScript模块打包器高级技巧

代码分割（Code Splitting）： Rollup.js 也支持代码分割，可以将代码分割成多个 chunk，按需加载，提高页面加载速度。
动态导入（Dynamic Import）： Rollup.js 支持动态导入，可以在运行时加载模块。
监听模式（Watch Mode）： Rollup.js 提供了监听模式，可以在代码修改后自动重新打包，提高开发效率。

理解和掌握 RollupJavaScript模块打包器的使用，能帮助我们构建更小、更快的 JavaScript 应用。在实际开发中，配合诸如 Nginx 的反向代理和负载均衡策略，以及 CDN 加速，可以进一步优化前端性能，减少服务器并发连接数，提升用户体验。也可以使用宝塔面板等工具来简化服务器配置和管理。

Rollup.js 模块打包器：从入门到精通，打造高性能前端应用

转载请注明出处: 加班到秃头

本文的链接地址: http://m.acea4.store/blog/129574.SHTML

本文最后发布于2026-04-03 10:50:20，已经过了24天没有更新，若内容或图片失效，请留言反馈

推荐阅读

(08)

深入剖析 JVM 结构与垃圾回收机制：原理、实践与性能优化 Odoo 前端控制器深度指南：打造高性能定制化网站

您可能对以下文章感兴趣