【前端构建】Rollup: 下一代 JavaScript 模块打包器_rollup 打包js

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础
​💫个人格言: \"如无必要，勿增实体\"

文章目录

• Rollup: 下一代 JavaScript 模块打包器
• • 1. 引言
  • 2. Rollup 的核心概念
  • • 2.1 树摇（Tree Shaking）
    • 2.2 ES 模块
    • 2.3 插件系统
  • 3. Rollup 的基本配置
  • 4. 常用插件
  • • 4.1 @rollup/plugin-node-resolve
    • 4.2 @rollup/plugin-commonjs
    • 4.3 @rollup/plugin-babel
    • 4.4 rollup-plugin-terser
  • 5. 高级特性
  • • 5.1 代码分割
    • 5.2 动态导入
    • 5.3 输出多种格式
  • 6. Rollup vs Webpack
  • 7. Rollup 的性能优化
  • • 7.1 使用 terser 插件
    • 7.2 外部化依赖
    • 7.3 使用 sourcemap
  • 8. Rollup 的最佳实践
  • 9. Rollup 在实际项目中的应用
  • 10. Rollup 的未来发展
  • 11. 结论

Rollup: 下一代 JavaScript 模块打包器

1. 引言

在现代前端开发中，模块打包器扮演着至关重要的角色。Rollup 作为一个高效、简洁的 JavaScript 模块打包器，以其出色的性能和灵活的配置而备受青睐。本文将深入探讨 Rollup 的核心概念、基本用法、高级特性以及最佳实践，帮助开发者更好地理解和使用这个强大的工具。

2. Rollup 的核心概念

2.1 树摇（Tree Shaking）

Rollup 最引人注目的特性之一就是其内置的树摇功能。树摇是一种通过静态分析代码来删除未使用代码的技术。这使得 Rollup 能够生成更小、更高效的包。

2.2 ES 模块

Rollup 原生支持 ES 模块（ESM），这是 JavaScript 的官方标准化模块系统。使用 ES 模块不仅可以让代码更加模块化，还能够更好地支持树摇。

2.3 插件系统

Rollup 采用了一个强大而灵活的插件系统，允许开发者扩展和自定义构建过程。从转换代码到优化输出，插件几乎可以处理构建过程的每个方面。

3. Rollup 的基本配置

一个基本的 Rollup 配置文件通常包含以下内容：

// rollup.config.jsexport default {  input: \'src/main.js\', output: {  file: \'bundle.js\', format: \'iife\' }};

这个简单的配置指定了入口文件（input）和输出选项（output）。format 选项指定了生成包的格式，这里的 iife 表示立即执行函数表达式。

4. 常用插件

Rollup 的强大很大程度上来自于其丰富的插件生态。以下是一些常用的插件：

4.1 @rollup/plugin-node-resolve

这个插件允许 Rollup 查找外部模块。

import resolve from \'@rollup/plugin-node-resolve\';export